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

Question

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

Answer 1

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

// 将要调用的接口列表
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 调用多个接口，并使用递归的方式来实现渐进式调用。每次调用时，会从接口列表中取出一定数量的接口进行调用，然后等待所有接口的响应，如果还有剩余的接口，就再次递归调用，直到所有接口都被调用完毕。

Answer 2

  // 模拟生成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 结果的对象数组。