gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-30 09:27:18 25 4
gpt4 key购买 nike

我正在使用最新的 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);

提前致谢。

最佳答案

使用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 .

关于javascript - ReactJS如何在简单组件的componentDidMount中等待所有API调用结束,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48603671/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com