Javascript 如何等待所有API调用在简单组件的componentDidMount中结束

我使用的是最新的react和非常基本的应用程序，它调用了第三方服务API，实际上并没有按照下面的意思设计好。 我必须执行一个返回列表的调用，然后必须迭代并调用另一个端点，以从列表中获取项的数据，然后在数据中再次执行新列表，我必须调用第三个API端点。 收到所有数据后，我将其组合到一个items数组中，并将其置于

componentDidMount

函数的状态，但只有在使用

setTimeout

将其包围时，这最后一步才有效

有什么优雅的方法吗

我使用的是

fetch

和真正纯粹的react组件，有我自己的简单服务，我在这里调用API，这里是一些代码部分

    items[tag].sensors = [];
    API.getObjects(sessionData, userDetails, tag).then(links => {

    Object.keys(links.link).forEach(link => {
        API.getObjects(sessionData, userDetails, link).then(objLink => {
            Object.keys(objLink.link).forEach(function (key) {
                let obj = objLink.link[key];
                if (obj && obj.type === 'sensor') {
                    API.getSensorNames(sessionData, key).then(response => {
                        const sensor =  response.sensor;
                        // some sensor calculations....
                        items[tag].sensors.push(sensor);
                    });
                }
            });
        });
    });
});
// this part only works if it's surrounded with timeout
setTimeout(function() {
    let processedItems = [];
    for (var key in items) {
        if (items.hasOwnProperty(key)) {
            processedItems.push(items[key]);
        }
    }
    self.setState({
        items: processedItems
    });

}, 1000);

---

提前谢谢

使用

async/await

操作符怎么样

这些运算符允许您等待响应就绪
您可以使用这种辅助函数

getItems = async (...) => {
  ...
  items[tag].sensors = []
  const links = await API.getObjects(sessionData, userDetails, tag)

  Object.keys(links.link).forEach(async (link) => {
    const objLink = await API.getObjects(sessionData, userDetails, link)

    Object.keys(objLink.link).forEach(async (key) => {
      let obj = objLink.link[key]
      if (obj && obj.type === 'sensor') {
        const response = await API.getSensorNames(sessionData, key)
        const sensor = response.sensor
        items[tag].sensors.push(sensor)
      }
    })
  })

  this.setState({ items })
}

---

您也可以看到这一点。

使用

async/await

操作符怎么样

这些运算符允许您等待响应就绪
您可以使用这种辅助函数

getItems = async (...) => {
  ...
  items[tag].sensors = []
  const links = await API.getObjects(sessionData, userDetails, tag)

  Object.keys(links.link).forEach(async (link) => {
    const objLink = await API.getObjects(sessionData, userDetails, link)

    Object.keys(objLink.link).forEach(async (key) => {
      let obj = objLink.link[key]
      if (obj && obj.type === 'sensor') {
        const response = await API.getSensorNames(sessionData, key)
        const sensor = response.sensor
        items[tag].sensors.push(sensor)
      }
    })
  })

  this.setState({ items })
}

---

您也可以看到这一点。

简单地说，您可以使用Promise等待，直到您从API调用中获得值，因此您可以像这样将代码放入函数中

function prepareItems() {
  items[tag].sensors = [];
  return new Promise((resolve, reject) => {
    API.getObjects(sessionData, userDetails, tag).then(links => {
      Object.keys(links.link).forEach(link => {
        API.getObjects(sessionData, userDetails, link).then(objLink => {
          Object.keys(objLink.link).forEach(function(key) {
            let obj = objLink.link[key];
            if (obj && obj.type === "sensor") {
              API.getSensorNames(sessionData, key).then(response => {
                const sensor = response.sensor;
                // some sensor calculations....
                items[tag].sensors.push(sensor);
                // whenever you set resolve it will end the promise
                //and pass the result it to the then function
                resolve(items)
              });
            }
          });
        });
      });
    });
  });
}

并使用

然后

在其解析后从prepareItems函数获取结果

prepareItems().then(items => {
//Do what ever you want with prepared item
})

---

简单地说，您可以使用Promise等待，直到您从API调用中获得值，因此您将像这样将代码放入函数中

function prepareItems() {
  items[tag].sensors = [];
  return new Promise((resolve, reject) => {
    API.getObjects(sessionData, userDetails, tag).then(links => {
      Object.keys(links.link).forEach(link => {
        API.getObjects(sessionData, userDetails, link).then(objLink => {
          Object.keys(objLink.link).forEach(function(key) {
            let obj = objLink.link[key];
            if (obj && obj.type === "sensor") {
              API.getSensorNames(sessionData, key).then(response => {
                const sensor = response.sensor;
                // some sensor calculations....
                items[tag].sensors.push(sensor);
                // whenever you set resolve it will end the promise
                //and pass the result it to the then function
                resolve(items)
              });
            }
          });
        });
      });
    });
  });
}

并使用

然后

在其解析后从prepareItems函数获取结果

prepareItems().then(items => {
//Do what ever you want with prepared item
})

---

你要找的是

Promise.all（）

@SLaks是的，tnx你要找的是

Promise.all（）

@SLaks是的，tnx