一种基于 async/await 和 Promise.all() 的实现方式
async function fetchData(objArr) {
// 遍历对象数组,创建并发请求的 Promise 数组
const promiseArr = objArr.map(async (obj) => {
const res = await fetch(obj.url);
const data = await res.json();
return { ...obj, data }; // 将得到的数据合并到原对象中
});
// 等待所有 Promise 完成
const results = await Promise.all(promiseArr);
return results;
}
// 示例用法
const objArr = [
{ name: 'Apple', url: 'https://api.example.com/apple' },
{ name: 'Banana', url: 'https://api.example.com/banana' },
{ name: 'Cherry', url: 'https://api.example.com/cherry' },
];
fetchData(objArr)
.then((results) => {
console.log(results);
// [
// { name: 'Apple', url: 'https://api.example.com/apple', data: {...} },
// { name: 'Banana', url: 'https://api.example.com/banana', data: {...} },
// { name: 'Cherry', url: 'https://api.example.com/cherry', data: {...} },
// ]
})
.catch((error) => {
console.error(error);
});
解析
在这个示例中,我们先定义了一个名为 fetchData 的异步函数,它接受一个对象数组作为参数。fetchData 函数先遍历对象数组,创建了一个新的 Promise 数组 promiseArr,该数组的元素为每个对象的数据请求 Promise。在每个 Promise 中,我们使用 fetch API 发送网络请求获取数据,并将得到的数据和原对象合并为一个新的对象,最后返回这个新的对象。我们使用 Promise.all() 方法等待所有 Promise 完成,并获取它们的结果数组 results。最后,我们将 results 返回。
在示例用法中,我们定义了一个对象数组 objArr,它包含了三个对象,每个对象都包含了一个名称和一个数据请求 URL。我们将 objArr 传递给 fetchData 函数,并通过 then() 方法获取得到的结果。在这个示例中,我们打印了 results 数组,它包含了三个对象,每个对象都包含了原对象的所有属性和请求得到的数据。