axios请求拦截器错误_Axios使用拦截器全局处理请求重试

Axios拦截器

Axios提供了拦截器的接口，让我们能够全局处理请求和响应。Axios拦截器会在Promise的then和catch调用前拦截到。

请求拦截示例

axios.interceptors.request.use(function (config) {

// 在发起请求请做一些业务处理

return config;

}, function (error) {

// 对请求失败做处理

return Promise.reject(error);

});

响应拦截示例

axios.interceptors.response.use(function (response) {

// 对响应数据做处理

return response;

}, function (error) {

// 对响应错误做处理

return Promise.reject(error);

});

Axios实现请求重试

在某些情况(如请求超时)，我们可能会希望能够重新发起请求。这时可以在响应拦截器做下处理，对请求发起重试。

请求重试需要考虑三个因素：

重试条件

重试次数

重试时延

配置

axios.defaults.retry = 1; //重试次数

axios.defaults.retryDelay = 1000;//重试延时

axios.defaults.shouldRetry = (error) => true;//重试条件，默认只要是错误都需要重试

响应拦截重试

axios.interceptors.response.use(undefined, (err) => {

var config = err.config;

// 判断是否配置了重试

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

if(!config.shouldRetry || typeof config.shouldRetry != 'function') {

return Promise.reject(err);

}

//判断是否满足重试条件

if(!config.shouldRetry(err)) {

return Promise.reject(err);

}

// 设置重置次数，默认为0

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);

});

//重新发起axios请求

return backoff.then(function() {

return axios(config);

});

});