js方法实现循环遍历对象数组,并发出新的数据请求,最后把得到的结果重新赋值到当前对象中

一种基于 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 数组,它包含了三个对象,每个对象都包含了原对象的所有属性和请求得到的数据。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值