如何在触发下一个函数之前等待 API 调用数据？答案

【问题标题】：How to wait for API Call Data before next function is triggered?如何在触发下一个函数之前等待 API 调用数据？
【发布时间】：2021-01-20 17:07:31
【问题描述】：

我想从我的后端获取一些数据，然后在另一个函数中使用这些数据。我遇到的问题是 JS 代码不会等到 API 调用完成，因此应该在数据中的数组是“未定义的”。如何实现“changeCurrentNode”等数据到这里的功能？

这是我的功能：

const fetchAnswerFromDialogflow = async (userInput, currentChatbotInEdit) => {
 const res1 = await axios.get(
      `https://mybot.uber.space/api/chatbots/${chatId}/nodeid`
    );
    console.log(res1);
    const nodeData = await res1.data;
    console.log(nodeData);

    const changeCurrentNode = () => {
      if (nodeData[0] != undefined) {
      for (let i = 0; i < nodeData[0].length; i++) {
      let newCurrentNodeData = [];
      newCurrentNodeData[nodeData[0][i].id] = nodeData[0][i]
      console.log(nodeData);
      console.log(nodeData[nodeData[0][i].id]);
      return newCurrentNodeData
  }}}
}

第 7 行的

console.log(nodeData) 显示了以下数组：

这就是我想从内部函数“changeCurrentNode”收到的：

这是我收到的结果：

【问题讨论】：

changeCurrentNode 是函数，所以你需要调用它。此外，您可以将 API 接收到的数据以changeCurrentNode(nodeData) 的形式传递给changeCurrentNode。

标签： javascript reactjs asynchronous async-await

【解决方案1】：

您正在迭代一个对象，它不应该被迭代（不可迭代），而是您可以这样做：Object.keys(currentNode[0]) 这将返回一个包含所有键的数组，使用该返回的数组迭代 currentNode[0] 对象

【讨论】：

【解决方案2】：

changeCurrentNode 是一个正在定义但未被调用的函数。

const fetchAnswerFromDialogflow = async (userInput, currentChatbotInEdit) => {
 const res1 = await axios.get(
      `https://mybot.uber.space/api/chatbots/${chatId}/nodeid`
    );
    console.log(res1);
    const nodeData = await res1.data;
    console.log(nodeData);

    const changeCurrentNode = () => {
      if (nodeData[0] != undefined) {
      for (let i = 0; i < nodeData[0].length; i++) {
      let newCurrentNodeData = [];
      newCurrentNodeData[nodeData[0][i].id] = nodeData[0][i]
      console.log(nodeData);
      console.log(nodeData[nodeData[0][i].id]);
      return newCurrentNodeData
  }}}

  changeCurrentNode();// added this
}

或者你可以去掉changeCurrentNode函数，直接把changeCurrentNode里面的逻辑加入到fetchAnswerFromDialogflow中

【讨论】：