Как я могу убедиться, что функция 1 завершается до запуска функции 2 в хуке useeffect? - PullRequest
Новая
       101

Как я могу убедиться, что функция 1 завершается до запуска функции 2 в хуке useeffect?

0 голосов
/ 04 августа 2020

Я создал чат-бота и хочу инициировать два вызова API Dialogflow в хуке useEffect. Функция 1 и функция 2 являются вызовами asyn c api. Желаемый результат состоит в том, что она сначала завершает функцию 1, а затем начинает с функции 2, но в настоящее время функция 2 возвращает значение быстрее, чем функция 1.

Вы знаете, как я могу сказать функции 2, чтобы она ждала, пока функция 1 возвращает значение? 

useEffect(
    () => {
      createChatSessionId();
      fetchEventAnswerFromDialogflow("Startevent" + chatId, chatId); // function 1
      fetchEventAnswerFromDialogflow("Frageevent1", chatId); // function 2
    }, // eslint-disable-next-line
    []
  );

1 Ответ

3 голосов
/ 04 августа 2020

Вызовы API асинхронны. Когда компилятор выполняет оператор asyn c, он не ждет, пока он завершит sh, а вместо этого вызывает следующий оператор.

Вариант первый (с использованием блока .then): - 

  useEffect(
    () => {
      createChatSessionId();
      fetchEventAnswerFromDialogflow("Startevent" + chatId, chatId).then(rep=>{
      fetchEventAnswerFromDialogflow("Frageevent1", chatId);})
        .catch(err){
          console.log(err)
         }
    }, // eslint-disable-next-line
    []
  );

Вариант второй - Согласно ES6 с использованием asyn c await. Я бы посоветовал не использовать обратный вызов useEffect как asyn c, а вместо этого создать новую функцию asyn c внутри useEffect и вызвать ее. 

useEffect(
    () => {
      createChatSessionId();
      const getData = async() =>{
         await fetchEventAnswerFromDialogflow("Startevent" + chatId, chatId);
         await fetchEventAnswerFromDialogflow("Frageevent1", chatId);  //Can remove await 
             //here, depending upon usecase
      }
      getData();
    }, // eslint-disable-next-line
    []
  );
...