在 reactjs 中编写一个带有回调的函数答案

【问题标题】：writing a function with callback in reactjs在 reactjs 中编写一个带有回调的函数
【发布时间】：2021-11-24 22:00:11
【问题描述】：

参考网址：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
  }

【问题讨论】：

FWIW，forEach 不返回值，所以data 将是undefined。文档说：“事件函数有责任确保 successCallback 被一组可解析的事件对象调用。” fetchData 与第一个函数有什么关系？您能否提供一个更完整的示例来显示您的 fetchData 和 fullcalendar API 相互交互？

标签： javascript reactjs ecmascript-6 es6-promise

【解决方案1】：

我建议编写一个简单的fetchFeed 函数，仅负责获取数据。使用 Promise，您可以避免面向回调的设计的许多缺点 -

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)

【讨论】：