如何基于axios实现带延迟多次调用API直至获取正确响应？

针对服务端处理2000行量级Excel耗时长、普通同步请求容易超时拿不到结果的问题，直接用带退避延迟的轮询重试逻辑即可，不需要额外依赖第三方库，基于原生Axios就能实现。

核心实现逻辑 #

• 大文件/大批量数据处理不要走接口同步返回，拆成「提交任务」+「轮询结果」两步：先提交Excel拿到任务ID，再反复查询任务状态直到拿到最终结果
• 轮询间隔不要用固定值，初始间隔设2秒，每次轮询后按比例拉长间隔，避免高频请求打垮服务端
• 必须设置最大轮询次数，防止服务端异常时前端无限发请求
• 每次拿到响应先做业务状态校验，区分「处理中」「处理成功」「处理失败」三种状态，不要只靠HTTP状态码判断结果

可直接复用的代码实现 #

import axios from 'axios';

// 配置项可根据自己业务的服务端性能调整
const POLLING_CONFIG = {
  maxRetryCount: 12, // 最多轮询12次，算上递增延迟总等待时长约45秒，足够覆盖2000行Excel的处理耗时
  baseDelay: 2000, // 第一次轮询间隔2秒
  delayStep: 1.5, // 每次轮询间隔在上一次基础上乘1.5，逐次拉长
};

/**
 * 带延迟的轮询请求封装
 * @param {() => Promise} requestAction 要执行的请求方法
 * @param {(res: any) => boolean} checkSuccess 校验响应是否为最终成功结果的方法，返回true代表终止轮询返回结果
 * @returns 最终成功的响应数据
 */
async function pollingWithDelay(requestAction, checkSuccess) {
  let retryCount = 0;
  let currentDelay = POLLING_CONFIG.baseDelay;

  while (retryCount < POLLING_CONFIG.maxRetryCount) {
    try {
      const response = await requestAction();
      // 拿到符合预期的成功结果直接返回
      if (checkSuccess(response)) return response;
      // 未拿到成功结果，等待指定时间后进入下一轮
      await new Promise(resolve => setTimeout(resolve, currentDelay));
      currentDelay = Math.round(currentDelay * POLLING_CONFIG.delayStep);
      retryCount++;
    } catch (error) {
      // 遇到接口报错（网络异常、5xx等）也走重试逻辑，达到最大次数再抛出错误
      if (retryCount === POLLING_CONFIG.maxRetryCount - 1) {
        throw new Error(`请求失败，已达最大重试次数：${error.message}`);
      }
      await new Promise(resolve => setTimeout(resolve, currentDelay));
      currentDelay = Math.round(currentDelay * POLLING_CONFIG.delayStep);
      retryCount++;
    }
  }

  throw new Error('任务处理超时，请稍后到任务列表手动查看结果');
}

// 2000行Excel处理场景的调用示例
async function processLargeExcel(file) {
  // 第一步：上传文件提交处理任务
  const uploadResp = await axios.post('/api/excel/upload', { file });
  const taskId = uploadResp.data?.taskId;
  if (!taskId) throw new Error('任务提交失败，未获取到有效任务标识');

  // 第二步：轮询查询任务状态
  const finalResult = await pollingWithDelay(
    // 每次轮询执行的请求：查询任务状态
    () => axios.get(`/api/excel/task/result?taskId=${taskId}`),
    // 结果校验逻辑，和服务端约定好状态值即可
    (resp) => {
      const { status, errorMsg } = resp.data;
      // 状态约定：1=处理中 2=处理成功 3=处理失败
      if (status === 3) throw new Error(`Excel处理失败：${errorMsg || '服务端未知错误'}`);
      return status === 2;
    }
  );

  return finalResult.data;
}

落地注意事项 #

• 轮询间隔不要设太短，2000行Excel的服务端处理耗时普遍在3-20秒区间，初始2秒+逐次递增的策略可以减少80%以上的无效请求
• 如果服务端支持回调通知，优先用回调代替轮询，没有回调能力的场景再用上述方案
• 不要在前端做无限轮询，最大轮询次数对应的总等待时长建议控制在1分钟以内，超时后引导用户手动刷新结果即可
• 如果是用户切到后台的场景，可以适当拉长轮询间隔，减少不必要的资源消耗

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