Блог

Главная - Вопросы по программированию - Как заставить асинхронную функцию в useEffect работать по порядку?

Как заставить асинхронную функцию в useEffect работать по порядку?

#javascript #reactjs #react-hooks

Вопрос:

Приведенный ниже код консоли 1,2,4,5,3,6. Как позволить ему утешить 1,2,3,4,5,6? демо: https://codesandbox.io/s/useeffect-4bul5

 const Foo = () => {
  const sleep = (timer) => {
    return new Promise((res) => {
      setTimeout(res, timer)
    })
  }

  React.useEffect(() => {
    console.log(1)
    const foo = async () => {
      console.log(2)
      await sleep(1000);
      console.log(3)
    }
    foo();
  }, []);

  React.useEffect(() => {
    console.log(4)
    const foo = async () => {
      console.log(5)
      await sleep(1000);
      console.log(6)
    }
    foo();
  }, []);

  return <div>111</div>
}

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

1. Насколько я знаю, вы не можете повлиять на порядок, в котором useEffect вызывается. В вашем случае я рекомендую один useEffect звонок.

2. Я бы также рекомендовал один эффект использования, который вы можете передать в результат использования useCallback((async () => ...)(), [...]) , таким образом, вы можете использовать await/async . Используйте state переключатель для запуска эффекта.

3. Да, вы правы, спасибо @Tracer69

Ответ №1:

Если вы создадите async функцию Foo, вы можете использовать await для обещаний, чтобы выполнять их синхронно.

Метки: