vue-resource 攔截器(interceptor)的使用

攔截器-interceptor

在現代的一些前端框架上,攔截器基本上是很基礎但很重要的一環,比如Angular原生就支持攔截器配置,VUE的Axios模塊也給我們提供了攔截器配置,那么攔截器到底是什么,它有什么用?

? ? ?攔截器能幫助我們解決的
  • 添加統一的request的參數?
    比如header中加入X-Requested-With,比如客戶端需要實現sign和token的驗證機制,比如你可以寫$http.get('/files', params),攔截器幫你拼接成?http://www.xxxx.com/1/files?這樣的請求地址
  • 處理統一的responseError?
    比如重連機制,拿到error.code錯誤碼重連,比如token過期,重新拿到token再次send request?
    比如統一報錯信息,給所有返回的404來個提示也會很酷

angular interceptor

angular的interceptor是個數組,在?$httpProvider?中進行配置,一般寫成一個config, 然后$httpProvider注入進來就可以配置了,把我們寫的?interceptor?push進去就OK了,?$httpProvider.interceptors.push('interceptor')?,interceptor一般寫成一個服務

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

return支持返回一個promise,可以對config中的params,data, url, headers等進行加工,符合我們的請求再return出去,所有的$http請求都會被攔截到

vue-resource 攔截器使用

在vue項目使用vue-resource的過程中,臨時增加了一個需求,需要在任何一個頁面任何一次http請求,增加對token過期的判斷,如果token已過期,需要跳轉至登錄頁面。如果要在每個頁面中的http請求操作中添加一次判斷,那么會是一個非常大的修改工作量。那么vue-resource是否存在一個對于任何一次請求響應捕獲的的公共回調函數呢?答案是有的!

vue-resource的interceptors攔截器的作用正是解決此需求的妙方。在每次http的請求響應之后,如果設置了攔截器如下,會優先執行攔截器函數,獲取響應體,然后才會決定是否把response返回給
then進行接
收。那么我們可以在這個攔截器里邊添加對響應狀態碼的判斷,來決定是跳轉到登錄頁面還是留在當前頁面繼續獲取數據。攔截器詳細介紹》》

下邊代碼添加在main.js中
Vue.http.interceptors.push((request, next) => {console.log(this)//此處this為請求所在頁面的Vue實例// modify requestrequest.method = 'POST';//在請求之前可以進行一些預處理和配置// continue to next interceptornext((response) => {//在響應之后傳給then之前對response進行修改和邏輯判斷。對于token時候已過期的判斷,就添加在此處,頁面中任何一次http請求都會先調用此處方法response.body = '...';return response;});
});

實例:
/******************攔截器設置請參考這部分(開始)******************/
Vue.http.interceptors.push((request, next)  =>{//登錄成功后將后臺返回的TOKEN在本地存下來,每次請求從sessionStorage中拿到存儲的TOKEN值let TOKEN=sessionStorage.getItem('STORAGE_TOKEN');if(TOKEN){//如果請求時TOKEN存在,就為每次請求的headers中設置好TOKEN,后臺根據headers中的TOKEN判斷是否放行request.headers.set('TOKEN',TOKEN);}next((response) => {return response;});
});
/******************攔截器設置請參考這部分(結束)******************/

//攔截器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})})

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/247648.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/247648.shtml
英文地址,請注明出處:http://en.pswp.cn/news/247648.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

【GamePlay】入門篇

【GamePlay】入門篇 游戲性編程是指通過一系列游戲系統將游戲想法變成現實的過程。 本次的簡例以NPC設計為主。 通常在進行腳本設計前,對NPC的屬性進行基本的添加和設定,諸如動畫系統、物理系統等等。 1.動畫系統 添加Animator組件,綁定骨骼。…

vue axios POST請求中參數以form data和request payload形式的原因

HTTP請求中,如果是get請求,那么表單參數以namevalue&name1value1的形式附到url的后面,如果是post請求,那么表單參數是在請求體中,也是以namevalue&name1value1的形式在請求體中。通過chrome的開發者工具可以看…

vue-resource使用

vue-resource是一個http請求插件,遵循promise,類似jquery中ajax操作。 vue-resource已不被官方推薦,官方推薦axios插件來操作http協議。 vue-resource中提供的方法 get(url, [options]) head(url, [options]) delete(url, [options]) jso…

HttpHttps

http協議與https Http 客戶端發送一個HTTP請求到服務器的請求消息包括以下格式: **請求行(request line)、請求頭部(header)、空行 和請求數據四個部分組成。** Get請求例子,使用Charles抓取的request&…

vue2使用axios post跳坑,封裝成模塊

終于將vue-resource替換成axios了,其中像application/x-www-form-urlencoded發送的頭信息以及返回的response結果這兩點都需要注意一下。 其實https://github.com/mzabriskie/axios也有說明的。因為我在vue-resource中使用了Vue.http.options.emulateJSON true;&am…

axios使用

axios和vue-resource一樣,是一個vue中操作http的插件,遵循promise,vue官方也推薦使用axios。 安裝axios npm i axios -S axios也是在運行時需要的,所以要保存在dependencies中。 引入axios import axios from axios Vue.proto…

jQuery length 和 size()區別

jQuery length和size()區別總結如下: 1.length是屬性,size()是方法。 2.如果你只是想獲取元素的個數,兩者效果一樣既 $("img").length 和 $("img").size() 獲取的值是一樣的;但是如果是獲取字符串的長…

一些關于自己的未來的東西

2019.7.4 自己大一建立對編程的基礎認識,確實培養了一些興趣,入了個門,不過沒有接觸到本質。大二加入到了學校的網站開發團隊,對網站開發后端進行了學習,對后臺開發也有了基礎的學習吧,哈哈可能以后就是要走…

Javascript面向對象編程:構造函數的繼承

今天要介紹的是,對象之間的"繼承"的五種方法。 比如,現在有一個"動物"對象的構造函數。 function Animal(){ this.species "動物"; } 還有一個"貓"對象的構造函數。 function Cat(name,color){ this.name nam…

并發與多線程

并發 并發(concurrency)是指CPU在某個時間段內交替處理多任務的能力。每個CPU不可能只顧著執行某個進程,而讓其他進程一直等待被執行。所以,CPU把可執行時間均分成若干份,每個進程執行一份或多份時間后,記錄…

有沒有朋友可以幫我解釋一下貼水是什么意思?

通俗易懂的講:貼水便宜,升水貴 當前,螺紋鋼05合約就是貼水01合約 翻譯,螺紋鋼05合約就是比01合約便宜 升水同理 轉載于:https://www.cnblogs.com/luoluo-123/p/11142229.html

es6常用點記錄

letconst解構賦值字符串數組函數對象SymbolSetWeakSetMapWeakMapProxyreflectProxy與Reflex結合實例classpromiseiteratorGerneratorDecorators模塊學習資料 let /* let 聲明變量 *//* es6相對于es5的全局和局部作用域,多了一個塊作用域,塊作用域里聲明的…

jquery插件封裝指南

入門 編寫一個jQuery插件開始于給jQuery.fn加入??新的功能屬性,此處添加的對象屬性的名稱就是你插件的名稱: jQuery.fn.myPlugin function(){//你自己的插件代碼};用戶非常喜歡的$符號哪里去了? 它仍然存在,但是,為…

synchronize原理

synchronized的三種應用方式 一. 修飾實例方法,作用于當前實例加鎖,進入同步代碼前要獲得當前實例的鎖。 二. 修飾靜態方法,作用于當前類對象加鎖,進入同步代碼前要獲得當前類對象的鎖。 三. 修飾代碼塊,指定加鎖對象&…

不能修改“System Roots”鑰匙串

iOS mac添加證書 不能修改“System Roots”鑰匙串錯誤 如圖: 解決方式: 打開鑰匙串---登錄---,直接把證書拖過來 然后,查看--我的證書,里面,找到證書,即可

stylus在vue中的使用

stylus是一個css預處理器,比較流行的css預處理器有sass、less、stylus,它們都一樣,都是css的語法糖,可以使用變量,可以有簡單的邏輯,使css的開發效率更高,更易維護。stylus來自node社區&#xf…

未來產品的設計

Donald A. Norman繼《情感化設計》之后,又一設計精品力作: 未來產品的設計樣章試讀及本書預定:http://www.china-pub.com/195642市場價 :¥39.00 會員價 : ¥29.25(75折) 【作  者】(美)Donald…

vue-cli webpack 配置分析

目錄結構 . ├── README.md ├── build │ ├── build.js │ ├── check-versions.js │ ├── dev-client.js │ ├── dev-server.js │ ├── utils.js │ ├── webpack.base.conf.js │ ├── webpack.dev.conf.js │ └── webpack.prod.c…

css之字體圖標

SVG與字體圖標 SVG圖片是矢量圖片,不會隨著圖片的伸縮而影響質量,通常把只有一種顏色的圖標做成SVG,通過SVG生成字體圖標,放到項目中使用。 https://icomoon.io/是一個比較快捷的生成字體圖標的線上工具,進入主頁后&…

history.back(-1)和history.go(-1)的區別

history.back(-1):直接返回當前頁的上一頁,數據全部消息,是個新頁面 history.go(-1):也是返回當前頁的上一頁,不過表單里的數據全部還在 history.back(0) 刷新 history.back(1) 前進 history.back(-1) 后退