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