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ī)，分別是：

1. 其它程序代碼執(zhí)行 HTTP 請(qǐng)求之后，在實(shí)際從瀏覽器發(fā)出請(qǐng)求之前，即處理請(qǐng)求
2. 得到請(qǐng)求的響應(yīng)之后，在交給其它程序代碼處理之前，即處理請(qǐng)求的響應(yīng)

所以，不難理解它可以用于如下幾個(gè)方面：

1. 全局處理錯(cuò)誤
2. 統(tǒng)一進(jìn)行身份驗(yàn)證一類的處理
3. 對(duì)所有發(fā)出去的請(qǐng)求進(jìn)行預(yù)處理
4. 對(duì)所有收到的響應(yīng)進(jìn)行預(yù)處理
5. 做一些增強(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í)際情況指定一二，分別如下：

1. 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)度條
2. requestError ：當(dāng)有多個(gè) Interceptor 的時(shí)候， requestError 會(huì)在前一個(gè) Interceptor 拋出錯(cuò)誤或者執(zhí)行 $q.reject() 時(shí)執(zhí)行，接收的參數(shù)就對(duì)應(yīng)的錯(cuò)誤
3. 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)度條置為完成
4. 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í)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論