axios配置：错误重试以及设置拦截器，以Csdn为例

前端开发项目是，必不可少的就是要能发送数据请求，而常用安装请求的js库就非Axios莫属了。
接下来，就开始进行配置。下面以对csdn请求为例。

// request 对axios进行业务的 简单封装
const axios = require('axios');
const baseHeadersMiddleware = require('./baseHeadersMiddleware');
const getAutoRetryInterceptor = require('./getAutoRetryInterceptor');

// 创建axios的默认配置
const instance = axios.create({
    baseURL: 'https://blog.csdn.net', // api的域名或者公共前缀
    withCredentials: true, // 跨域请求是否携带cookie， 默认为false
});

// 增加默认的请求头
instance.defaults.headers.common['Content-Type'] = 'application/json';

// 使用base请求头中间件 做请求拦截器
instance.interceptors.request.use(baseHeadersMiddleware);

// 对返回数据进行处理
instance.interceptors.response.use(response => {
    const config = response.config;
    // 这里是请求配置，如果ignoreInterceptors或者noDataCode 满足，就直接返回response
    if (config.ignoreInterceptors || config.noDataCode) {
        return response;
    }

    // 从返回头 获取需要的数据
    const { code } = response.data; // 百度

    const SUCCESS_CODE = 200;
    if (code === SUCCESS_CODE ) { // SUCCESS_CODE 这个为业务请求正常但会的code
        // 请求正常 通常这里可以对返回数据做一些处理后再返回 
        return {
            ...response.data
        };
    } else {
        // ErrorType.LoginRequired 为请求需要进行登录的错误 code由业务自行定义
        // isAnonymousAccess 定义一些特定的场景 是否可以进行匿名访问
        // if (response.data.code === ErrorType.LoginRequired && !isAnonymousAccess()) {  // ！！！
        //     //跳转到登录页面或者进行一些其他操作
        // }
        // 获取错误提示 getErrorCodeMessage 方法通常用于 做报错提示国际化

        // const msg = getErrorCodeMessage(code); // ！！！
 
        return Promise.reject(
            Object.assign(new Error('response error'), {
                ...response.data,
                code,
                config: response.config,
                url: response.config.url || '',
                queryParams: response.config.data || response.config.params || {},
                resMsg: response.data.msg,
                requestData: response.request?._data
            }),
        );
    }
});

// 返回拦截器中间件 可以用于做 重试操作
instance.interceptors.response.use(undefined, getAutoRetryInterceptor(instance));

module.exports = instance;

// 请求头中间件 baseHeadersMiddleware.js
const baseHeadersMiddleware = (config) => {
    config.headers['Accept']='*/*';
    config.headers['accept-language']='zh-CN,zh;q=0.9,be;q=0.8,en;q=0.7,bs;q=0.6';
    config.headers['cache-control']='no-cache';
    config.headers['authority']='blog.csdn.net';
    config.headers['sec-fetch-dest']='empty';
    config.headers['sec-fetch-mode']='cors';
    config.headers['sec-fetch-site']='same-origin';
    config.headers['user-agent']='Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36';
    // config.headers['AcX-Requested-Withcept']='*';
    // config.headers['Accept']='XMLHttpRequest';
    return config;
}

module.exports = baseHeadersMiddleware;

// 错误重试中间件 getAutoRetryInterceptor.js
const MAX_RETRY_TIMES = 3;
const RANDOM_BASE_DELAY = 2000;
const RETRY_COUNT_KEY = '__retryCount__';

function getAutoRetryInterceptor(axios) {
    return function wrappedInterceptor(response) {
        return autoRetryInterceptor(axios, response);
    };
}

function autoRetryInterceptor(axios, error) {
    const config = error.config;
    // 判断是否配置了重试 或者 满足重试条件

    // if (!config || !shouldRetry(error)) { // 满足条件 业务自己定义即可
    //     return Promise.reject(error);
    // }

    // 设置重置次数，默认为0
    config[RETRY_COUNT_KEY] = config[RETRY_COUNT_KEY] || 0;

    // 判断业务是否配置重试次数， 若没有 则默认是3次
    const retryMaxCount = config.retryMaxCount || MAX_RETRY_TIMES;

    // 判断是否超过了重试次数
    if (config[RETRY_COUNT_KEY] >= retryMaxCount) {
        return Promise.reject(error);
    }
    // 重试次数自增
    config[RETRY_COUNT_KEY] += 1;

    // 延时处理
    let delay = RANDOM_BASE_DELAY;

    if (retryMaxCount <= config[RETRY_COUNT_KEY]) {
        // 重试最大次数时. 关闭Loading弹窗以及进行一些操作
        //  ...
    }
    const sleep = new Promise(resolve => setTimeout(resolve, delay));
    // 重新发起axios请求
    return sleep.then(() => {
        console.log('retry', config.url, config[RETRY_COUNT_KEY], delay);
        return axios(config);
    });
}

module.exports = getAutoRetryInterceptor;

// 业务demo  demo.js
const request = require('./request')

request({
    url: '/community/home-api/v1/get-business-list',
    method: 'GET',
    params: {
        page: 1,
        size: 20,
        businessType: 'blog',
        orderby: '',
        noMore: false,
        year: '',
        month: '',
        username: 'wang_9909'
    },
}).then(res => console.log(res))

成功的情况：

失败后重试的情况：