在reactjs中写一个带回调的函数

Question

reference-url: https://fullcalendar.io/docs/events-function

下面是一个将事件作为函数提供给FullCalendar的方法。我如何在react功能组件中编写此内容，我使用graphql获取数据，这有点不同。

function(info, successCallback, failureCallback) {
req.get('myxmlfeed.php')
.type('xml')
.query({
start: info.start.valueOf(),
end: info.end.valueOf()
})
.end(function(err, res) {
if (err) {
failureCallback(err);
} else {
successCallback(
Array.prototype.slice.call( // convert to array
res.getElementsByTagName('event')
).map(function(eventEl) {
return {
title: eventEl.getAttribute('title'),
start: eventEl.getAttribute('start')
}
})
)
}
})

，这是我的当前函数，它返回一个简单的数组。我如何实现回调和回调失败，正如他们在文档中提到的。

const fetchData = async () => {
const { searchEvents: myEvents } = await searchEvents()
try {
const data = myEvents.content.forEach((x) => {
x.start = new Date(x.start)
x.end = new Date(x.end)
})
setIsPageLoaded(true)
calendarRef.current.getApi().addEventSource(data)
return clonedata
} catch (err) {
console.log(err)
}
return true
}

Answer 1

我建议编写一个简单的fetchFeed函数，只有负责获取数据。使用承诺，你可以避免面向回调设计的许多缺点——

function fetchFeed (start, end) {
return new Promise((success, failure) => {
req
.get("myxmlfeed.php")
.type("xml")
.query({ start, end })
.end((err, res) => {
if (err)
failure(err)
else
success(res)
})
})
}

现在我们可以用一些startDate和一些endDate来称呼fetchFeed。阳性结果可以在.then(...)中处理，任何错误都可以在.catch(...)中处理-

fetchFeed(startDate, endDate)
.then(res => {
// ...
})
.catch(err => {
console.log(err)
})

Promises获得了async和await语法的额外支持，这使得编写此类程序更加自然-

async function updateFeed (...) {
const res = await fetchFeed(startDate, endDate)
for (const e of res.getElementsByTagName("event")) {
// ...
}
}

updateFeed(...).then(console.log).catch(console.error)