AngularJS如何使用Interceptors來統(tǒng)一處理HTTP請求和響應

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

Web 開發(fā)中，除了數據操作之外，最頻繁的就是發(fā)起和處理各種 HTTP 請求了，加上 HTTP 請求又是異步的，如果在每個請求中來單獨捕獲各種常規(guī)錯誤，處理各類自定義錯誤，那將會有大量的功能類似的代碼，或者使用丑陋的方法在每個請求中調用某幾個自定義的函數來處理。這兩種方法基本都不是靠譜之選。好在 AngularJS 提供了 Interceptors ——攔截戰(zhàn)斗機——來對應用內所有的 XHR 請求進行統(tǒng)一處理。

主要功能

Interceptors 有兩個處理時機，分別是：

1. 其它程序代碼執(zhí)行 HTTP 請求之后，在實際從瀏覽器發(fā)出請求之前，即處理請求

2. 得到請求的響應之后，在交給其它程序代碼處理之前，即處理請求的響應

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

1. 全局處理錯誤

2. 統(tǒng)一進行身份驗證一類的處理

3. 對所有發(fā)出去的請求進行預處理

4. 對所有收到的響應進行預處理

5. 做一些增強用戶體驗的操作，例如顯示一個進度條

基本使用

先來看看最基本的使用：

var app = angular.module('app', []);

// 定義一個 Service ，稍等將會把它作為 Interceptors 的處理函數
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) {
    // 遠程服務器無響應
   } else if(500 === err.status) {
    // 處理各類自定義錯誤
   } else if(501 === err.status) {
    // ...
   }
   return $q.reject(err);
  }
 };
}

// 添加對應的 Interceptors
app.config(['$httpProvider', function($httpProvider){
 $httpProvider.interceptors.push(HttpInterceptor);
}]);

進一步了解

實際的 Interceptor 處理函數中， return 了一個包含四個成員的對象，這四個成員都 不是必須 的，可以按實際情況指定一二，分別如下：

1. request ：接收一個參數，它是 $http 中的標準 config 對象，同時也需要返回一個標準 config ，此時可以添加各類身份驗證信息，同時也可在此啟動進度條

2. requestError ：當有多個 Interceptor 的時候， requestError 會在前一個 Interceptor 拋出錯誤或者執(zhí)行 $q.reject() 時執(zhí)行，接收的參數就對應的錯誤

3. response ：接受一個請求對象參數，可以不處理就直接返回，此時也可以將進度條顯示為成功完成，當然，如果后端 API 返回自定義錯誤時，HTTP 的狀態(tài)碼仍然是 200 得話，便在這里處理自定義錯誤，也可以對返回數據做一些處理，注意要將進度條置為完成

4. responseError ：這個是重頭戲，即可以處理標準的 Http 錯誤，如服務器沒有響應時，或者 PHP 之類的 CGI 經常出現的 502 一類，還可以處理 HTTP 狀態(tài)碼不是 200 的各類自定義錯誤

上面四個中，前兩個是請求的前置處理，后兩個是針對請求的響應的處理。

以上是“AngularJS如何使用Interceptors來統(tǒng)一處理HTTP請求和響應”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業(yè)資訊頻道！