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

Question

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

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

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
    []
  );