Question

我创建了一个聊天机器人，并希望在useEffect挂钩中启动两个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
    []
  );

我如何确定函数1在useeffect挂钩中开始于函数2之前结束？

1 个答案: