Блог

Главная - Вопросы по программированию - написание функции с обратным вызовом в reactjs

написание функции с обратным вызовом в reactjs

#javascript #reactjs #ecmascript-6 #es6-promise

Вопрос:

ссылка-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
  }

Комментарии:

1. FWIW, forEach не возвращает значение, так data и будет undefined . В документации говорится: «Функция события несет ответственность за то, чтобы убедиться successCallback , что вызывается с массивом анализируемых объектов событий». Как это fetchData связано с первой функцией? Можете ли вы привести более полный пример, показывающий, как ваш fetchData и fullcalendar API взаимодействуют друг с другом?

Ответ №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)
      })
  })
}

Теперь мы можем позвонить fetchFeed с некоторыми startDate и некоторыми endDate . Положительный результат может быть обработан, .then(...) и любая ошибка может быть устранена в .catch(...) —

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

Обещания получили дополнительную поддержку 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)
Метки: