请求超时重发

Axios配置超时时长

import axios from 'axios';

const service = axios.create({
    timeout: 10 * 1000
});

当请求超出配置的timeout时长还未返回，则Axios会判定当前请求超时。这时我们可以重发次数和重发间隔来尝试再次请求

service.defaults.retry = 1;                // 超时后重新请求的次数
service.defaults.retryDelay = 1 * 1000;    // 超时后重新请求的等待时间

/**
 * 请求响应拦截处理
 */
service.interceptors.response.use(
    (response) => {
        // 请求成功在此处理
    },
    (error) => {
        // 请求失败在这里处理

        if (error.code === 'ECONNABORTED' && error.message.includes('timeout')) {
            const config = error.config;
            if (!config || !config.retry) {
		alert('错误提示')
		return Promise.reject(error)
            }

            config.__retryCount = config.__retryCount || 0
            if (config.__retryCount >= config.retry) {
		// 超时重发的次数已用完
		alert('错误提示')
		return Promise.reject(error)
            }

            // 定义一个延迟的方法，也可以单独抽离出来做公共方法
            const backoff = new Promise((resolve) => {
		setTimeout(() => {
                    resolve()
		}, config.retryDelay || 1000)
            })
		
            // 延迟时间到后重新发起请求
            return backoff.then(() => {
                config.__retryCount++
		reurn service(config)
            })
        }
    }
)

如上是axios实例service的公共配置，实际使用中还可以根据每个接口的具体情况进行单独配置，如：

service({
    method: 'post',
    url: 'http://www.baidu.com',
    retry: 10,
    retryDelay: 100 * 1000
})

Axios请求超时重发

请求超时重发