Axios攔截器

Axios提供了攔截器的接口，讓我們能夠全局處理請(qǐng)求和響應(yīng)。Axios攔截器會(huì)在Promise的then和catch調(diào)用前攔截到。

請(qǐng)求攔截示例

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

// 在發(fā)起請(qǐng)求請(qǐng)做一些業(yè)務(wù)處理

return config;

}, function (error) {

// 對(duì)請(qǐng)求失敗做處理

return Promise.reject(error);

});

響應(yīng)攔截示例

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

// 對(duì)響應(yīng)數(shù)據(jù)做處理

return response;

}, function (error) {

// 對(duì)響應(yīng)錯(cuò)誤做處理

return Promise.reject(error);

});

Axios實(shí)現(xiàn)請(qǐng)求重試

在某些情況(如請(qǐng)求超時(shí))，我們可能會(huì)希望能夠重新發(fā)起請(qǐng)求。這時(shí)可以在響應(yīng)攔截器做下處理，對(duì)請(qǐng)求發(fā)起重試。

請(qǐng)求重試需要考慮三個(gè)因素：

重試條件

重試次數(shù)

重試時(shí)延

配置

axios.defaults.retry = 1; //重試次數(shù)

axios.defaults.retryDelay = 1000;//重試延時(shí)

axios.defaults.shouldRetry = (error) => true;//重試條件，默認(rèn)只要是錯(cuò)誤都需要重試

響應(yīng)攔截重試

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

}

// 設(shè)置重置次數(shù)，默認(rèn)為0

config.__retryCount = config.__retryCount || 0;

// 判斷是否超過了重試次數(shù)

if(config.__retryCount >= config.retry) {

return Promise.reject(err);

}

//重試次數(shù)自增

config.__retryCount += 1;

//延時(shí)處理

var backoff = new Promise(function(resolve) {

setTimeout(function() {

resolve();

}, config.retryDelay || 1);

});

//重新發(fā)起axios請(qǐng)求

return backoff.then(function() {

return axios(config);

});

});

總結(jié)

以上是生活随笔為你收集整理的axios请求拦截器错误_Axios使用拦截器全局处理请求重试的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。