如何确保函数 1 在函数 2 在 useEffect 挂钩中开始之前结束？

Question

我创建了一个聊天机器人并想在一个 useEffect Hook 中启动两个 Dialogflow API 调用。函数 1 和函数 2 都是异步 api 调用。想要的结果是它先完成函数 1，然后从函数 2 开始，但目前函数 2 returns 值比函数 1 快。

你知道我如何告诉函数 2 等到函数 1 returns 一个值吗？

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

Answer 1

API 调用是异步的。当编译器遇到异步语句时，它不会等待它完成，而是调用下一条语句。

选项一，（使用 .then 块）：-

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

选项二 - 根据 ES6 使用异步等待。我建议不要将 useEffect 回调设为异步，而是在 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
    []
  );

如何确保函数 1 在函数 2 在 useEffect 挂钩中开始之前结束？

How can I make sure that function 1 ends before function 2 starts within useeffect hook?

api

async-await

reactjs

dialogflow-es

use-effect