js 渐进式调用接口如何实现?

场景:js vue 1000个 ajax 接口
代码如何实现 先调用 5个接口 5个接口都有响应了(成功或失败)在调用5个接口,直到将1000个接口全部请求

阅读 1.7k
2 个回答
✓ 已被采纳

可以使用循环和递归的方式来实现渐进式调用接口:

// 将要调用的接口列表
const apiList = [  '/api/1',  '/api/2',  '/api/3',  '/api/4',  '/api/5',  '/api/6',  '/api/7',  '/api/8',  '/api/9',  '/api/10'];

// 每次调用的接口数量
const batchSize = 5;

async function callApi(apiList) {
  // 取出本次要调用的接口列表
  const currentBatch = apiList.splice(0, batchSize);

  try {
    // 调用接口
    await Promise.all(currentBatch.map(api => axios.get(api)));

    // 如果还有剩余的接口,则递归调用
    if (apiList.length > 0) {
      callApi(apiList);
    }
  } catch (error) {
    console.error(error);
  }
}

// 开始调用
callApi(apiList);

上面的代码使用了 Promise.all 调用多个接口,并使用递归的方式来实现渐进式调用。每次调用时,会从接口列表中取出一定数量的接口进行调用,然后等待所有接口的响应,如果还有剩余的接口,就再次递归调用,直到所有接口都被调用完毕。

  // 模拟生成1000个promise
  let promiseList = []
  for (let i = 0; i < 1000; i++) {
    promiseList.push(Promise.resolve(i))
  }

  for (let i = 0; i < 200; i++) {
    Promise.allSettled(promiseList.splice(0, 5)).
    then((results) => results.forEach((result) => console.log(result.status, result)));
  }

Promise.allSettled() 方法以 promise 组成的可迭代对象作为输入,并且返回一个 Promise 实例。当输入的所有 promise 都已敲定时(包括传递空的可迭代类型),返回的 promise 将兑现,并带有描述每个 promsie 结果的对象数组。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题