在vue項(xiàng)目中使用vue-resource調(diào)用接口的過(guò)程中，假設(shè)我們需要在任何一個(gè)頁(yè)面調(diào)用http請(qǐng)求的時(shí)候规揪，都在接口請(qǐng)求成功之前桥氏，出現(xiàn)一個(gè)loading，當(dāng)接口有了響應(yīng)猛铅，返回了response的時(shí)候字支，將loading隱藏。如果在頁(yè)面每一個(gè)http請(qǐng)求的時(shí)候奸忽，都添加一次判斷堕伪，那將造成代碼冗余和重復(fù)工作量，有沒(méi)有什么方法可以在請(qǐng)求每一次接口的時(shí)候栗菜，統(tǒng)一進(jìn)行處理欠雌，然后再返回給每一個(gè)接口呢
vue-resourced的interceptors正是為這個(gè)而生的，在每次http的請(qǐng)求響應(yīng)之后疙筹，如果設(shè)置了攔截器富俄，會(huì)優(yōu)先執(zhí)行攔截器函數(shù)，獲取響應(yīng)體而咆，然后才會(huì)決定是否把response返回給
then進(jìn)行接收霍比。
我們可以在這個(gè)攔截器里邊添加對(duì)響應(yīng)狀態(tài)碼的判斷，來(lái)決定是跳轉(zhuǎn)到登錄頁(yè)面還是留在當(dāng)前頁(yè)面繼續(xù)獲取數(shù)據(jù)暴备。這個(gè)函數(shù)一般是在根組件里面進(jìn)行注冊(cè)悠瞬，例如app.vue
一般的寫(xiě)法如下：
Vue.http.interceptors.push((request, next) => {
// modify request
request.method = 'POST';//在請(qǐng)求之前可以進(jìn)行一些預(yù)處理和配置
// continue to next interceptor
//在響應(yīng)之后傳給then之前對(duì)response進(jìn)行修改和邏輯判斷。對(duì)于session已過(guò)期的判斷，就添加在此處浅妆，頁(yè)面中任何一次http請(qǐng)求都會(huì)先調(diào)用此處方法
next((response) => {
loading = false// loading隱藏玛痊，一般在vuex里控制
if(response.status === 200) {
... //處理請(qǐng)求成功的邏輯
return response // 必須返回，后面的接口的then狂打，才能獲取response
} else {
if (response.status >= 500) {
// 錯(cuò)誤處理
} else if (response.status === 404) {
...
}
return reponse // 必須返回
}
});
});
