axios 利用interceptors(拦截器)完美解决自动重试问题。
Axios 是一个基于 Promise 的 HTTP 客户端,而 HTTP 协议是基于请求和响应:
所以 Axios 提供了请求拦截器和响应拦截器来分别处理请求和响应,它们的作用如下:
请求拦截器:该类拦截器的作用是在请求发送前统一执行某些操作,比如在请求头中添加 token 字段。
响应拦截器:该类拦截器的作用是在接收到服务器响应后统一执行某些操作,比如发现响应状态码为 401 时,自动跳转到登录页。
import axios from 'axios'// 重试次数,共请求2次axios.defaults.retry = 1// 请求的间隙axios.defaults.retryDelay = 1000axios.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;//打印当前重试次数console.log(config.url +' 自动重试第' + config.__retryCount + '次');// 创建新的Promisevar backoff = new Promise(function (resolve) {setTimeout(function () {resolve();}, config.retryDelay || 1);});// 返回重试请求return backoff.then(function () {return axios(config);});});axios.get('', {retry: 5,retryDelay: 1000,timeout: 6000}).then(res=> {console.log('success', res.data);}).catch(err=> {console.log('failed', err);});