源碼時代前端干貨分享| Axios的請求與響應(yīng)攔截步驟詳解

一、使用場景
Axios作為React，Vue，Angular最常使用的HTTP請求庫，承擔(dān)了大部分請求的發(fā)送和接收。
在項(xiàng)目中，開發(fā)者經(jīng)常會遇到兩種情景
一：在每次發(fā)送請求時，攜帶用戶token方便后臺做用戶相關(guān)操作
二：服務(wù)器所有接口都會返回一個錯誤碼，比如10001，請求參數(shù)錯誤。 10002，用戶未授權(quán)等等，我們需要在收到響應(yīng)后對錯誤碼進(jìn)行相關(guān)提示。
如果我們在每個接口都進(jìn)行驗(yàn)證那太麻煩，代碼冗余不說，后期維護(hù)成本也很高，到處找接口進(jìn)行代碼改動。Axios提供了非常方便的一種功能：請求/響應(yīng)攔截器。我們就可以在這種場景派上用場。

二、請求攔截器
場景：在每次發(fā)送請求時，攜帶用戶token方便后臺做用戶相關(guān)操作
在每次發(fā)送請求前，都會進(jìn)入請求攔截器，我們可以在此處統(tǒng)一綁定上想要發(fā)送的參數(shù)，則每個請求都會自動攜帶token
axios.interceptors.request.use(
config => {
//config是axios配置對象
//每次發(fā)送請求前都會進(jìn)入此攔截器處理函數(shù)，可以在此處統(tǒng)一攜帶上token，每次請求都會自
config.headers.common['token'] = localStorage.getItem(“token”);
return config
},
err => {
//請求出錯的處理函數(shù)
return Promise.reject(err)
})

三、響應(yīng)攔截器
場景：服務(wù)器所有接口都會返回一個錯誤碼，比如10001，請求參數(shù)錯誤。 10002，用戶未授權(quán)等等，我們需要在收到響應(yīng)后對錯誤碼進(jìn)行相關(guān)提示。
在每次收到響應(yīng)時，都會先進(jìn)入響應(yīng)攔截器，在分發(fā)給各個請求函數(shù)，我們可以在此處統(tǒng)一先處理錯誤碼，在進(jìn)入各自的響應(yīng)細(xì)節(jié)函數(shù)處理res

axios.interceptors.response.use(function(res){
//收到響應(yīng)后，可以先統(tǒng)一處理錯誤碼
switch (res.data.code) {
case 10001: alert(‘非法操作’);
router.push({path: '/});
case 10002: alert(‘權(quán)限不足’);
......
}
return res;
},function(err){
//響應(yīng)出錯進(jìn)入的函數(shù)
return Promise.reject(err);
});
以上就是axios攔截器的使用教程及場景，希望對大家有所幫助，不管任何項(xiàng)目，只要使用的是axios發(fā)送請求，則都可以使用攔截器進(jìn)行統(tǒng)一處理，減少冗余代碼，降低二次開發(fā)及維護(hù)難度。
（本文由源碼時代技術(shù)老師撰寫，轉(zhuǎn)載請注明出處）