angular http interceptors 攔截器使用分享-有解無憂

攔截器

在開始創建攔截器之前，一定要了解 $q和延期承諾api

出于全域錯誤處理，身份驗證或請求的任何同步或異步預處理或回應的后處理目的，希望能夠在將請求移交給服務器之前攔截請求，并在將請求移交給服務器之前將回應攔截發起這些請求的應用程式代碼-攔截器利用promise api滿足同步和異步預處理的需求，

攔截器是$httpProvider通過將它們添加到$httpProvider.interceptors陣列而向其注冊的服務工廠，呼叫工廠并注入依賴項（如果指定），并回傳攔截器，

有兩種攔截器（和兩種拒絕攔截器）：

request：攔截器通過http config物件呼叫，該函式可以自由修改config物件或創建新物件，函式需要config直接回傳物件，或者包含config或新config物件的Promise，
requestError：當先前的攔截器拋出錯誤或被拒絕解決時，攔截器將被呼叫，
response：攔截器通過http response物件呼叫，該函式可以自由修改response物件或創建新物件，函式需要response直接回傳物件，或者作為包含response或新response物件的承諾，
responseError：當先前的攔截器拋出錯誤或被拒絕解決時，攔截器將被呼叫，

 1 // register the interceptor as a service
 2 $provide.factory('myHttpInterceptor', function($q, dependency1, dependency2) {
 3   return {
 4     // optional method
 5     'request': function(config) {
 6       // do something on success
 7       return config;
 8     },
 9 
10     // optional method
11    'requestError': function(rejection) {
12       // do something on error
13       if (canRecover(rejection)) {
14         return responseOrNewPromise
15       }
16       return $q.reject(rejection);
17     },
18 
19 
20 
21     // optional method
22     'response': function(response) {
23       // do something on success
24       return response;
25     },
26 
27     // optional method
28    'responseError': function(rejection) {
29       // do something on error
30       if (canRecover(rejection)) {
31         return responseOrNewPromise
32       }
33       return $q.reject(rejection);
34     }
35   };
36 });
37 
38 $httpProvider.interceptors.push('myHttpInterceptor');
39 
40 
41 // alternatively, register the interceptor via an anonymous factory
42 $httpProvider.interceptors.push(function($q, dependency1, dependency2) {
43   return {
44    'request': function(config) {
45        // same as above
46     },
47 
48     'response': function(response) {
49        // same as above
50     }
51   };
52 });

此處有一個坑，在push時，提示未定義攔截器，因為$httpProvider在config 攔截器時,攔截器service 還不能找到，

可以將攔截器service 定義在config依賴的模塊中使用，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/175424.html

標籤：JavaScript

上一篇：jqgrid addRowData報錯

下一篇：vue-組件