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

});

});

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。