
這篇文章主要為大家展示了“AngularJS如何使用Interceptors來統(tǒng)一處理HTTP請求和響應(yīng)”,內(nèi)容簡而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“AngularJS如何使用Interceptors來統(tǒng)一處理HTTP請求和響應(yīng)”這篇文章吧。

站在用戶的角度思考問題,與客戶深入溝通,找到鞏留網(wǎng)站設(shè)計(jì)與鞏留網(wǎng)站推廣的解決方案,憑借多年的經(jīng)驗(yàn),讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合,創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品,建站類型包括:網(wǎng)站設(shè)計(jì)、網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、國際域名空間、虛擬主機(jī)、企業(yè)郵箱。業(yè)務(wù)覆蓋鞏留地區(qū)。
Web 開發(fā)中,除了數(shù)據(jù)操作之外,最頻繁的就是發(fā)起和處理各種 HTTP 請求了,加上 HTTP 請求又是異步的,如果在每個(gè)請求中來單獨(dú)捕獲各種常規(guī)錯(cuò)誤,處理各類自定義錯(cuò)誤,那將會(huì)有大量的功能類似的代碼,或者使用丑陋的方法在每個(gè)請求中調(diào)用某幾個(gè)自定義的函數(shù)來處理。這兩種方法基本都不是靠譜之選。好在 AngularJS 提供了 Interceptors ——攔截戰(zhàn)斗機(jī)——來對應(yīng)用內(nèi)所有的 XHR 請求進(jìn)行統(tǒng)一處理。
主要功能
Interceptors 有兩個(gè)處理時(shí)機(jī),分別是:
其它程序代碼執(zhí)行 HTTP 請求之后,在實(shí)際從瀏覽器發(fā)出請求之前,即處理請求
得到請求的響應(yīng)之后,在交給其它程序代碼處理之前,即處理請求的響應(yīng)
所以,不難理解它可以用于如下幾個(gè)方面:
全局處理錯(cuò)誤
統(tǒng)一進(jìn)行身份驗(yàn)證一類的處理
對所有發(fā)出去的請求進(jìn)行預(yù)處理
對所有收到的響應(yīng)進(jìn)行預(yù)處理
做一些增強(qiáng)用戶體驗(yàn)的操作,例如顯示一個(gè)進(jìn)度條
基本使用
先來看看最基本的使用:
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ù)器無響應(yīng)
} else if(500 === err.status) {
// 處理各類自定義錯(cuò)誤
} else if(501 === err.status) {
// ...
}
return $q.reject(err);
}
};
}
// 添加對應(yīng)的 Interceptors
app.config(['$httpProvider', function($httpProvider){
$httpProvider.interceptors.push(HttpInterceptor);
}]);進(jìn)一步了解
實(shí)際的 Interceptor 處理函數(shù)中, return 了一個(gè)包含四個(gè)成員的對象,這四個(gè)成員都 不是必須 的,可以按實(shí)際情況指定一二,分別如下:
request :接收一個(gè)參數(shù),它是 $http 中的標(biāo)準(zhǔn) config 對象,同時(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ù)就對應(yīng)的錯(cuò)誤
response :接受一個(gè)請求對象參數(shù),可以不處理就直接返回,此時(shí)也可以將進(jìn)度條顯示為成功完成,當(dāng)然,如果后端 API 返回自定義錯(cuò)誤時(shí),HTTP 的狀態(tài)碼仍然是 200 得話,便在這里處理自定義錯(cuò)誤,也可以對返回?cái)?shù)據(jù)做一些處理,注意要將進(jìn)度條置為完成
responseError :這個(gè)是重頭戲,即可以處理標(biāo)準(zhǔn)的 Http 錯(cuò)誤,如服務(wù)器沒有響應(yīng)時(shí),或者 PHP 之類的 CGI 經(jīng)常出現(xiàn)的 502 一類,還可以處理 HTTP 狀態(tài)碼不是 200 的各類自定義錯(cuò)誤
上面四個(gè)中,前兩個(gè)是請求的前置處理,后兩個(gè)是針對請求的響應(yīng)的處理。
以上是“AngularJS如何使用Interceptors來統(tǒng)一處理HTTP請求和響應(yīng)”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!