axios配置请求失败时的拦截器，用于当请求失败时重新发送请求，或者提示

最新推荐文章于 2025-09-24 11:41:55 发布

原创最新推荐文章于 2025-09-24 11:41:55 发布 · 3.7k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#axios 请求失败拦截

web前端同时被 2 个专栏收录

23 篇文章

订阅专栏

axios

2 篇文章

订阅专栏

本文介绍了一个基于Axios的请求重试机制实现，通过配置重试次数、延迟时间及超时请求处理，确保网络不稳定时请求的成功率。文章详细解释了如何在Axios实例中设置重试参数，并在请求失败时自动进行重试。

import Axios from "axios";

import { API_ROOT, CONTENT_TYPE } from "./config";

// 创建axios实例对象

const REQUEST = Axios.create();

// 配置axios实例对象初始路径

REQUEST.defaults.baseURL = API_ROOT;

REQUEST.defaults.headers.post["Content-Type"] = CONTENT_TYPE;

// 请求失败重试次数

REQUEST.defaults.retry = 4;

// 请求重试延迟

REQUEST.defaults.retryDelay = 1000;

// 超时请求机制(未使用)

REQUEST.interceptors.response.use(undefined, function axiosRetryInterceptor(
  err
) {
  var config = err.config;

  // 如果配置不存在或未设置重试选项，则拒绝

  if (!config || !config.retry) return Promise.reject(err);

  // 设置变量以跟踪重试次数

  config.__retryCount = config.__retryCount || 0;

  // 检查我们是否已经注销了总重试次数

  if (config.__retryCount >= config.retry) {
    // 剔除错误

    return Promise.reject(err);
  }

  // 增加重试次数

  config.__retryCount += 1;

  // 创建新的异步对象来处理重试请求

  var backoff = new Promise(function(resolve) {
    setTimeout(function() {
      resolve();
    }, config.retryDelay || 1);
  });

  /**
  
  *
  
  Return the promise in which recalls axios to retry the request
  
  返回调用AXIOS来重试请求
  
  *
  
  * */

  return backoff.then(function() {
    return axios(config);
  });
});