Axios 如何实现请求重试？

在 Axios 如何取消重复请求? 这篇文章中，阿宝哥介绍了在 Axios 中如何取消重复请求及 CancelToken 的工作原理。而本文将介绍在 Axios 中如何通过拦截器或适配器来实现请求重试的功能。那么为什么要进行请求重试呢?这是因为在某些情况下，比如请求超时的时候，我们希望能自动重新发起请求进行重试操作，从而完成对应的操作。

下面阿宝哥将介绍如何使用 Axios 提供的拦截器或适配器来实现请求重试的功能，如果你对 Axios 的拦截器或适配器还不熟悉的话，建议先阅读 77.9K 的 Axios 项目有哪些值得借鉴的地方这篇文章。接下来，我们先来介绍如何使用拦截器实现请求重试的方案。

一、拦截器实现请求重试的方案

Axios 是一个基于 Promise 的 HTTP 客户端，而 HTTP 协议是基于请求和响应：

所以 Axios 提供了请求拦截器和响应拦截器来分别处理请求和响应，它们的作用如下：

请求拦截器：该类拦截器的作用是在请求发送前统一执行某些操作，比如在请求头中添加 token 字段。
响应拦截器：该类拦截器的作用是在接收到服务器响应后统一执行某些操作，比如发现响应状态码为 401 时，自动跳转到登录页。

在 Axios 中设置拦截器很简单，通过 axios.interceptors.request 和 axios.interceptors.response 对象提供的 use 方法，就可以分别设置请求拦截器和响应拦截器：

exportinterfaceAxiosInstance{
interceptors:{
request:AxiosInterceptorManager<AxiosRequestConfig>;
response:AxiosInterceptorManager<AxiosResponse>;
};
}
exportinterfaceAxiosInterceptorManager<V>{
use(onFulfilled?:(value:V)=>V|Promise<V>,
onRejected?:(error:any)=>any):number;
eject(id:number):void;
}

对于请求重试的功能来说，我们希望让用户不仅能够设置重试次数，而且可以设置重试延时时间。当请求失败的时候，若该请求的配置对象配置了重试次数，而 Axios 就会重新发起请求进行重试操作。为了能够全局进行请求重试，接下来我们在响应拦截器上来实现请求重试功能，具体代码如下所示：

axios.interceptors.response.use(null,(err)=>{
letconfig=err.config;
if(!config||!config.retryTimes)returnPromise.reject(err);
const{__retryCount=0,retryDelay=300,retryTimes}=config;
//在请求对象上设置重试次数
config.__retryCount=__retryCount;
//判断是否超过了重试次数
if(__retryCount>=retryTimes){
returnPromise.reject(err);
}
//增加重试次数
config.__retryCount++;
//延时处理
constdelay=newPromise((resolve)=>{
setTimeout(()=>{
resolve();
},retryDelay);
});
//重新发起请求
returndelay.then(function(){
returnaxios(config);
});
});

以上的代码并不会复杂，对应的处理流程如下图所示：

介绍完如何使用拦截器实现请求重试的功能之后，下面阿宝哥来介绍适配器实现请求重试的方案。

二、适配器实现请求重试的方案

Axios 引入了适配器，使得它可以同时支持浏览器和 Node.js 环境。对于浏览器环境来说，它通过封装 XMLHttpRequest API 来发送 HTTP 请求，而对于 Node.js 环境来说，它通过封装 Node.js 内置的 http 和 https 模块来发送 HTTP 请求。

在 Axios 如何缓存请求数据? 这篇文章中，阿宝哥介绍了如何通过增强默认的 Axios 适配器，来实现缓存请求数据的功能。同样，采用类似的思路，我们也可以通过增强默认的 Axios 适配器来实现请求重试的功能。

在介绍如何增强默认适配器之前，我们先来看一下 Axios 内置的 xhrAdapter 适配器，它被定义在 lib/adapters/xhr.js 文件中：

//lib/adapters/xhr.js
module.exports=functionxhrAdapter(config){
returnnewPromise(functiondispatchXhrRequest(resolve,reject){
varrequestData=config.data;
varrequestHeaders=config.headers;
varrequest=newXMLHttpRequest();
//省略大部分代码
varfullPath=buildFullPath(config.baseURL,config.url);
request.open(config.method.toUpperCase(),buildURL(fullPath,config.params,config.paramsSerializer),true);
//SettherequesttimeoutinMS
request.timeout=config.timeout;
//Listenforreadystate
request.onreadystatechange=functionhandleLoad(){…}
//Sendtherequest
request.send(requestData);
});
};

很明显 xhrAdapter 适配器是一个函数对象，它接收一个 config 参数并返回一个 Promise 对象。而在 xhrAdapter 适配器内部，最终会使用 XMLHttpRequest API 来发送 HTTP 请求。为了实现请求重试的功能，我们就可以考虑通过高阶函数来增强 xhrAdapter适配器的功能。