詳解AngularJS用Interceptors來(lái)統(tǒng)一處理HTTP請(qǐng)求和響應(yīng)
Web 開(kāi)發(fā)中,除了數(shù)據(jù)操作之外,最頻繁的就是發(fā)起和處理各種 HTTP 請(qǐng)求了,加上 HTTP 請(qǐng)求又是異步的,如果在每個(gè)請(qǐng)求中來(lái)單獨(dú)捕獲各種常規(guī)錯(cuò)誤,處理各類自定義錯(cuò)誤,那將會(huì)有大量的功能類似的代碼,或者使用丑陋的方法在每個(gè)請(qǐng)求中調(diào)用某幾個(gè)自定義的函數(shù)來(lái)處理。這兩種方法基本都不是靠譜之選。好在 AngularJS 提供了 Interceptors ——攔截戰(zhàn)斗機(jī)——來(lái)對(duì)應(yīng)用內(nèi)所有的 XHR 請(qǐng)求進(jìn)行統(tǒng)一處理。
主要功能
Interceptors 有兩個(gè)處理時(shí)機(jī),分別是:
- 其它程序代碼執(zhí)行 HTTP 請(qǐng)求之后,在實(shí)際從瀏覽器發(fā)出請(qǐng)求之前,即處理請(qǐng)求
- 得到請(qǐng)求的響應(yīng)之后,在交給其它程序代碼處理之前,即處理請(qǐng)求的響應(yīng)
所以,不難理解它可以用于如下幾個(gè)方面:
- 全局處理錯(cuò)誤
- 統(tǒng)一進(jìn)行身份驗(yàn)證一類的處理
- 對(duì)所有發(fā)出去的請(qǐng)求進(jìn)行預(yù)處理
- 對(duì)所有收到的響應(yīng)進(jìn)行預(yù)處理
- 做一些增強(qiáng)用戶體驗(yàn)的操作,例如顯示一個(gè)進(jìn)度條
基本使用
先來(lái)看看最基本的使用:
var app = angular.module('app', []); // 定義一個(gè) Service ,稍等將會(huì)把它作為 Interceptors 的處理函數(shù) app.factory('HttpInterceptor', ['$q', HttpInterceptor]); function HttpInterceptor($q) { return { request: function(config){ return config; }, requestError: function(err){ return $q.reject(err); }, response: function(res){ return res; }, responseError: function(err){ if(-1 === err.status) { // 遠(yuǎn)程服務(wù)器無(wú)響應(yīng) } else if(500 === err.status) { // 處理各類自定義錯(cuò)誤 } else if(501 === err.status) { // ... } return $q.reject(err); } }; } // 添加對(duì)應(yīng)的 Interceptors app.config(['$httpProvider', function($httpProvider){ $httpProvider.interceptors.push(HttpInterceptor); }]);
進(jìn)一步了解
實(shí)際的 Interceptor 處理函數(shù)中, return 了一個(gè)包含四個(gè)成員的對(duì)象,這四個(gè)成員都 不是必須 的,可以按實(shí)際情況指定一二,分別如下:
- request :接收一個(gè)參數(shù),它是 $http 中的標(biāo)準(zhǔn) config 對(duì)象,同時(shí)也需要返回一個(gè)標(biāo)準(zhǔn) config ,此時(shí)可以添加各類身份驗(yàn)證信息,同時(shí)也可在此啟動(dòng)進(jìn)度條
- requestError :當(dāng)有多個(gè) Interceptor 的時(shí)候, requestError 會(huì)在前一個(gè) Interceptor 拋出錯(cuò)誤或者執(zhí)行 $q.reject() 時(shí)執(zhí)行,接收的參數(shù)就對(duì)應(yīng)的錯(cuò)誤
- response :接受一個(gè)請(qǐng)求對(duì)象參數(shù),可以不處理就直接返回,此時(shí)也可以將進(jìn)度條顯示為成功完成,當(dāng)然,如果后端 API 返回自定義錯(cuò)誤時(shí),HTTP 的狀態(tài)碼仍然是 200 得話,便在這里處理自定義錯(cuò)誤,也可以對(duì)返回?cái)?shù)據(jù)做一些處理,注意要將進(jìn)度條置為完成
- responseError :這個(gè)是重頭戲,即可以處理標(biāo)準(zhǔn)的 Http 錯(cuò)誤,如服務(wù)器沒(méi)有響應(yīng)時(shí),或者 PHP 之類的 CGI 經(jīng)常出現(xiàn)的 502 一類,還可以處理 HTTP 狀態(tài)碼不是 200 的各類自定義錯(cuò)誤
上面四個(gè)中,前兩個(gè)是請(qǐng)求的前置處理,后兩個(gè)是針對(duì)請(qǐng)求的響應(yīng)的處理。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Angular 5.x 學(xué)習(xí)筆記之Router(路由)應(yīng)用
本篇文章主要介紹了Angular 5.x 學(xué)習(xí)筆記之Router(路由)應(yīng)用,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-04-04Angular如何在應(yīng)用初始化時(shí)運(yùn)行代碼詳解
這篇文章主要給大家介紹了關(guān)于Angular如何在應(yīng)用初始化時(shí)運(yùn)行代碼的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-06-06AngularJS表格樣式簡(jiǎn)單設(shè)置方法示例
這篇文章主要介紹了AngularJS表格樣式簡(jiǎn)單設(shè)置方法,結(jié)合實(shí)例形式分析了AngularJS結(jié)合bootstrap針對(duì)表格樣式的相關(guān)設(shè)置技巧,需要的朋友可以參考下2017-03-03AngularJS 購(gòu)物車全選/取消全選功能的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇AngularJS 購(gòu)物車全選/取消全選功能的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08angularjs http與后臺(tái)交互的實(shí)現(xiàn)示例
這篇文章主要介紹了angularjs http與后臺(tái)交互的實(shí)現(xiàn)示例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-12-12AngularJS基礎(chǔ) ng-srcset 指令簡(jiǎn)單示例
本文主要介紹AngularJS ng-srcset 指令,這里對(duì)ng-srcset 指令做了詳細(xì)的資料整理,附有代碼示例,有需要的小伙伴可以參考下2016-08-08angular2路由切換改變頁(yè)面title的示例代碼
本篇文章主要介紹了angular2路由切換改變頁(yè)面title的示例代碼,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08Angular懶加載模塊與Combined?Injector原理全面解析
這篇文章主要為大家介紹了Angular懶加載模塊與Combined?Injector原理全面解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-10-10