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

Question

我正在使用最新的 React 和非常基本的应用程序，它调用第 3 方服务 API，实际上它的设计并不好，其含义如下。 我必须执行一个返回列表的调用，然后必须迭代并调用其他端点以从列表中获取项目的数据，然后在数据中再次有新列表，我必须为其调用第三个 API 端点。 收到所有数据后，我将其组合到一个项目数组中，并将其置于 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);

提前致谢。

Answer 1

使用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 })
}

你也可以看到这个伟大的documentation .