攔截器-interceptor

在現(xiàn)代的一些前端框架上，攔截器基本上是很基礎(chǔ)但很重要的一環(huán)，比如Angular原生就支持?jǐn)r截器配置，VUE的Axios模塊也給我們提供了攔截器配置，那么攔截器到底是什么，它有什么用？
? ? ?攔截器能幫助我們解決的

• 添加統(tǒng)一的request的參數(shù)?
  比如header中加入X-Requested-With，比如客戶(hù)端需要實(shí)現(xiàn)sign和token的驗(yàn)證機(jī)制，比如你可以寫(xiě)$http.get('/files', params)，攔截器幫你拼接成?http://www.xxxx.com/1/files?這樣的請(qǐng)求地址
• 處理統(tǒng)一的responseError?
  比如重連機(jī)制，拿到error.code錯(cuò)誤碼重連，比如token過(guò)期，重新拿到token再次send request?
  比如統(tǒng)一報(bào)錯(cuò)信息，給所有返回的404來(lái)個(gè)提示也會(huì)很酷

angular interceptor

angular的interceptor是個(gè)數(shù)組，在?$httpProvider?中進(jìn)行配置，一般寫(xiě)成一個(gè)config， 然后$httpProvider注入進(jìn)來(lái)就可以配置了，把我們寫(xiě)的?interceptor?push進(jìn)去就OK了，?$httpProvider.interceptors.push('interceptor')?，interceptor一般寫(xiě)成一個(gè)服務(wù)

var interceptor = {'request': function (config) {return config},'requestError': function (rejection) {},'response': function (response) {return response},'responseError': function (rejection) {} }

return支持返回一個(gè)promise，可以對(duì)config中的params,data, url, headers等進(jìn)行加工，符合我們的請(qǐng)求再return出去，所有的$http請(qǐng)求都會(huì)被攔截到

vue-resource 攔截器使用

在vue項(xiàng)目使用vue-resource的過(guò)程中，臨時(shí)增加了一個(gè)需求，需要在任何一個(gè)頁(yè)面任何一次http請(qǐng)求，增加對(duì)token過(guò)期的判斷，如果token已過(guò)期，需要跳轉(zhuǎn)至登錄頁(yè)面。如果要在每個(gè)頁(yè)面中的http請(qǐng)求操作中添加一次判斷，那么會(huì)是一個(gè)非常大的修改工作量。那么vue-resource是否存在一個(gè)對(duì)于任何一次請(qǐng)求響應(yīng)捕獲的的公共回調(diào)函數(shù)呢？答案是有的!

vue-resource的interceptors攔截器的作用正是解決此需求的妙方。在每次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ù)。攔截器詳細(xì)介紹》》 下邊代碼添加在main.js中 Vue.http.interceptors.push((request, next) => {console.log(this)//此處this為請(qǐng)求所在頁(yè)面的Vue實(shí)例// modify requestrequest.method = 'POST';//在請(qǐng)求之前可以進(jìn)行一些預(yù)處理和配置// continue to next interceptornext((response) => {//在響應(yīng)之后傳給then之前對(duì)response進(jìn)行修改和邏輯判斷。對(duì)于token時(shí)候已過(guò)期的判斷，就添加在此處，頁(yè)面中任何一次http請(qǐng)求都會(huì)先調(diào)用此處方法response.body = '...';return response;}); });
實(shí)例：/******************攔截器設(shè)置請(qǐng)參考這部分(開(kāi)始)******************/ Vue.http.interceptors.push((request, next) =>{//登錄成功后將后臺(tái)返回的TOKEN在本地存下來(lái),每次請(qǐng)求從sessionStorage中拿到存儲(chǔ)的TOKEN值let TOKEN=sessionStorage.getItem('STORAGE_TOKEN');if(TOKEN){//如果請(qǐng)求時(shí)TOKEN存在,就為每次請(qǐng)求的headers中設(shè)置好TOKEN,后臺(tái)根據(jù)headers中的TOKEN判斷是否放行request.headers.set('TOKEN',TOKEN);}next((response) => {return response;}); }); /******************攔截器設(shè)置請(qǐng)參考這部分(結(jié)束)******************/
//攔截器Vue.http.interceptors.push((request, next) => { // console.log(Login.item);var tokens = localStorage.getItem('token');request.headers.set('Authorization', tokens); // console.log(request.headers);help.showLoading = true;next((response) => { // console.log(response);help.showLoading = false;return response})})

總結(jié)

以上是生活随笔為你收集整理的vue-resource 拦截器（interceptor）的使用的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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