這篇文章主要為大家展示了“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è)資訊頻道！