Собственный опрос React

#react-native #polling

#react-native #опрос

Вопрос:

Я пытаюсь реализовать некоторый код опроса api, это то, что у меня пока есть:

 async retrieveNotifications() {
  const res = await fetch(url)
  if (res.status === 200) {
    this.props.setNotifications(res.data)
  }
  setTimeout(() => {
    this.retrieveNotifications()
    // polling in 10 min cycles
  }, 600000);
}

код работает, однако вопрос в том, имеет ли это какие-либо недостатки в производительности из-за его рекурсивности? Кто-нибудь знает лучшее решение для опроса в rn? Спасибо за помощь 🙂

Ответ №1:

Не уверен в влиянии рекурсии здесь на производительность (или даже если закрытие setTimeout точно считается рекурсией), но вы могли бы использовать setInterval для вызова метода опроса каждые 10 минут, без необходимости последовательного соединения вызовов. И не забудьте использовать clearInterval, когда вы хотите, чтобы это прекратилось!

Например:

 async retrieveNotifications() {
    const res = await fetch(url)
    if (res.status === 200) {
        this.props.setNotifications(res.data)
    }
}

//inside some class method
setInterval(this.retrieveNotifications, 600000);

1. Есть ли простой способ, которым это работает с асинхронным ожиданием? Мне не нравится работать с обещаниями ^^

2. Я думаю, что это просто сработает … async / await относится к тому, что происходит внутри вашего метода. Интервал не будет ждать его, но код внутри вашего метода должен вести себя как раньше. Пример добавлен выше.

3. Я действительно ценю вашу помощь, ваш код почти сработал, он каким-то образом вернул undefined как res.данные, подобные этому, мне пришлось создать функцию fat arrow из retrieveNotifications, чтобы она работала, я опубликую рабочий код для всех, кто сталкивается с той же проблемой, он выглядит намного лучше, как вы предложили

4. Изучите это для подробного использования setInterval() clearInterval(). Перехватчики React будут намного более оптимизированы. overreacted.io/making-setinterval-declarative-with-react-hooks

Ответ №2:

Это улучшенный код, предложенный формой @bmovement, спасибо за вашу помощь:D

 constructor() {
  super()
  // polling in 10 min cycles
  this.interval = setInterval(this.retrieveNotifications, 600000)
}

componentDidMount() {
  this.retrieveNotifications()
}

componentWillUnmount() {
  clearInterval(this.interval);
}

retrieveNotifications = async () => {
  const res = await fetch(url)
  if (res.status === 200) {
    this.props.setNotifications(res.data)
  }
}