如何在axios迭代请求中每轮返回完成百分比与对应获取数据数组

实现方案 #

核心改造逻辑 #

• 将请求函数作为入参传入迭代逻辑，消除硬编码耦合，可灵活切换不同资源的请求方法
• 增加额外参数透传能力，适配需要传token、自定义头的请求场景
• 修复原有递归逻辑中请求参数写死、回调调用时机错误的问题

通用迭代函数实现 #

async function batchFetch(start, finish, requestFn, callback, ...extraRequestArgs) {
  if (start >= finish) {
    return;
  }
  try {
    // 透传当前序号+额外参数到请求函数
    const response = await requestFn(start, ...extraRequestArgs);
    const percentage = Math.round((start / finish) * 100);
    // 触发回调返回进度和本次拉取数据
    callback({ percentage, pageContent: response.data });
    // 递归执行下一次请求
    await batchFetch(start + 1, finish, requestFn, callback, ...extraRequestArgs);
  } catch (error) {
    console.error("请求出错：", error);
  }
}

调用示例 #

拉取人物数据（带token）

const userToken = '你的接口鉴权token';
// 传入请求函数、回调，最后透传token参数
batchFetch(1, 3, requestCharacters, PrintObjectsFromFetch, userToken);

拉取行星数据（无额外参数）

batchFetch(1, 3, requestPlanets, PrintObjectsFromFetch);

函数式风格进阶封装 #

如果需要复用固定的请求和回调配置，可以用柯里化做进一步封装：

// 生成固定配置的拉取函数
const createResourceFetcher = (requestFn, callback) => 
  (start, finish, ...extraArgs) => batchFetch(start, finish, requestFn, callback, ...extraArgs);

// 封装人物拉取方法
const fetchCharacters = createResourceFetcher(requestCharacters, PrintObjectsFromFetch);
// 直接调用，仅需传范围和token
fetchCharacters(1, 3, userToken);

// 封装行星拉取方法
const fetchPlanets = createResourceFetcher(requestPlanets, PrintObjectsFromFetch);
fetchPlanets(1, 3);

内容的提问来源于stack exchange，提问作者codeLearnerrr