如何在 useEffect 挂钩中使用 Promise.all 获取所有数据?
Posted
技术标签:
【中文标题】如何在 useEffect 挂钩中使用 Promise.all 获取所有数据?【英文标题】:How to get all the data with Promise.all in the useEffect hook? 【发布时间】:2022-01-16 00:23:44 【问题描述】:我有这个 useEffect 钩子,它试图一次获取所有数据
useEffect(() =>
let promises = [];
data.forEach(item =>
promises.push(fetch(`https://app.subsocial.network/subid/api/v1/check/$(item.name).toLowerCase()`))
);
Promise.all(promises)
.then(response => response.map(item => item.json()))
.then(data => console.log(data))
.catch(error => console.log(error))
, [data]);
但是,我在控制台中有这个数据:
【问题讨论】:
【参考方案1】:json()
方法返回一个承诺。
这意味着您已经使用Promise.all
等待所有响应承诺解决,但随后您只需生成一组新的 JSON 解析承诺。
在您使用Promise.all
之前生成 JSON 解析承诺。
即
promises.push(
fetch(`https://app.subsocial.network/subid/api/v1/check/$(item.name).toLowerCase()`))
.then(response => response.json());
【讨论】:
【参考方案2】:你快到了,你只需要分析你得到第一个Promise.all
的每一个承诺
useEffect(() =>
let promises = [];
data.forEach((item) =>
promises.push(
fetch(
`https://app.subsocial.network/subid/api/v1/check/$item.name.toLowerCase()`
)
);
);
Promise.all(promises)
.then((responses) =>
// Take all responses and analyze them with another Promise.all
return Promise.all(
responses.map((response) =>
return response.json();
)
);
)
.then((data) =>
// Extracted data
console.log(data);
)
.catch((error) =>
// Catched errors
console.log(error);
);
, [data]);
在then
方法中,您将获得所有响应,并用另一个Promise.all
包装它们,以便您可以从中提取它们收到的内容。
【讨论】:
在开始任何 JSON 解析之前等待所有响应到达似乎不是解决此问题的有效方法。 你是对的。您的答案既干净又高效。如果需要,我会留下我的答案,以便为任何寻求另一种方式的人提供替代方案。很好的答案@Quentin以上是关于如何在 useEffect 挂钩中使用 Promise.all 获取所有数据?的主要内容,如果未能解决你的问题,请参考以下文章
如何在 React 中使用 useEffect 挂钩调用多个不同的 api
在 useEffect 挂钩中使用 axios 取消令牌时如何修复失败的测试
如何在数组依赖中正确使用 useEffect 挂钩。我从 redux 商店传递了状态,但我的组件仍然无限渲染