React处理循环请求接口汇总数据

该代码示例展示了如何使用async函数和Promise.all来并发地获取10个不同API接口的数据。每个fetch请求返回一个Promise,这些Promise被存储在数组中,然后通过Promise.all等待所有请求完成。最后,返回的结果是一个包含所有API响应数据的数组。如果在请求过程中发生错误,代码会捕获并打印错误。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

async function fetchData() {
  const promises = [];  // 声明 Promise 对象数组

  for (let i = 0; i < 10; i++) {  // 循环遍历
    const promise = fetch(`/api/data/${i}`).then(response => response.json());  // 请求接口并返回 Promise 对象
    promises.push(promise);  // 将 Promise 对象推入 Promise 对象数组
  }

  const result = await Promise.all(promises);  // 等待所有 Promise 对象的结果返回,并将结果合并为一个数组
  return result;
}

// 调用 fetchData() 方法获取所有数据
fetchData()
  .then(result => {
    // 处理合并后的数据
    console.log(result);
  })
  .catch(error => {
    // 处理错误
    console.error(error);
  });

  };
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值