AngularJS 中利用 Interceptors 來統一處理 HTTP 的錯誤
Web 開發中，除了數據操作之外，最頻繁的就是發起和處理各種 HTTP 請求了，加上 HTTP 請求又是異步的，如果在每個請求中來單獨捕獲各種常規錯誤，處理各類自定義錯誤，那將會有大量的功能類似的代碼，或者使用醜陋的方法在每個請求中調用某幾個自定義的函數來處理。這兩種方法基本都不是靠譜之選。好在 AngularJS 提供了 Interceptors ——攔截戰鬥機——來對應用內所有的 XHR 請求進行統一處理。
主要功能
Interceptors 有兩個處理時機，分別是：
- 其它程序代碼執行 HTTP 請求之後，在實際從瀏覽器發出請求之前，即處理請求
- 得到請求的響應之後，在交給其它程序代碼處理之前，即處理請求的響應
所以，不難理解它可以用於如下幾個方面：
- 全局處理錯誤
- 統一進行身份驗證一類的處理
- 對所有發出去的請求進行預處理
- 對所有收到的響應進行預處理
- 做一些增強用戶體驗的操作，例如顯示一個進度條
基本使用
先來看看最基本的使用：
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 了一個包含四個成員的對象，這四個成員都 不是必須 的，可以按實際情況指定一二，分別如下：
request：接收一個參數，它是$http中的標準 config 對象，同時也需要返回一個標準config，此時可以添加各類身份驗證信息，同時也可在此啓動進度條requestError：當有多個 Interceptor 的時候，requestError會在前一個 Interceptor 拋出錯誤或者執行$q.reject()時執行，接收的參數就對應的錯誤response：接受一個請求對象參數，可以不處理就直接返回，此時也可以將進度條顯示爲成功完成，當然，如果後端 API 返回自定義錯誤時，HTTP 的狀態碼仍然是 200 得話，便在這裏處理自定義錯誤，也可以對返回數據做一些處理，注意要將進度條置爲完成responseError：這個是重頭戲，即可以處理標準的 Http 錯誤，如服務器沒有響應時，或者 PHP 之類的 CGI 經常出現的 502 一類，還可以處理 HTTP 狀態碼不是 200 的各類自定義錯誤
上面四個中，前兩個是請求的前置處理，後兩個是針對請求的響應的處理。
幾個相關的庫
顯示進度：
- NProgress
- NgProgress NProgress for AngularJS
- rc-progress
- progress-full-width
- progress-svg
提示框：
- toastr
- ngToast toast for AngularJS
- angular-toast
- k-toast
- notie
- ng-notie
- corner-notie
完整的例子
具體請參見代碼（ Github 、 Coding.NET ），例子中演示瞭如何統一處理錯誤，並使用 toastr 提示，並使用 NProgress 顯示一個進度條。