AngularJs の HTTP レスポンス interceptor_AngularJS を簡単に学ぶ

いつでも、認証やエラー処理などのグローバル機能をリクエストに追加したい場合は、リクエストがサーバーに送信される前、またはサーバーが戻ったときにリクエストをインターセプトする方が良い方法です。

angularJs は、インターセプターを通じてグローバル レベルで処理する方法を提供します。

4 種類のインターセプター

リクエストをインターセプトするリクエストメソッドを実装します

request: function(config) {
// do something on request success
return config || $q.when(config);
} 

このメソッドは、$http がリクエストをバックグラウンドに送信する前に実行されるため、構成を変更したり、他の操作を実行したりできます。このメソッドはリクエスト構成オブジェクトをパラメーターとして受け取り、構成オブジェクトまたは Promise を返す必要があります。無効な構成オブジェクトまたは Promise が返された場合、それは拒否され、$http 呼び出しが失敗します。

リクエスト例外をインターセプトする requestError メソッドを実装します

requestError: function(rejection) {
　　// do something on request error　　return $q.reject(rejection);
} 

リクエストの送信に失敗したり、インターセプターによって拒否されたりすることがあります。リクエスト例外インターセプターは、前のリクエスト インターセプターによって中断されたリクエストをキャプチャします。これは、リクエストを復元したり、場合によっては、プログレス バーを閉じたり、ボタンや入力ボックスをアクティブにしたりするなど、リクエストの前に行われた設定を元に戻すために使用できます。

レスポンスをインターセプトするレスポンス メソッドを実装します

response: function(response) {
　　// do something on response success
return response || $q.when(response);} 

このメソッドは、$http がバックグラウンドから応答を受信した後に実行されるため、応答を変更したり、他の操作を実行したりできます。このメソッドは応答オブジェクトをパラメータとして受け取り、応答オブジェクトまたは Promise を返す必要があります。応答オブジェクトには、要求構成、ヘッダー、ステータス、およびバックグラウンドからのデータが含まれます。無効な応答オブジェクトが返された場合、または Promise が拒否された場合、$http 呼び出しは失敗します。

応答例外をインターセプトするための responseError メソッドを実装します

responseError: function(rejection) {
// do something on response error　　return $q.reject(rejection);
} 

バックグラウンド呼び出しが失敗したり、リクエスト インターセプターによって拒否されたり、前のレスポンス インターセプターによって中断されたりする場合があります。この場合、応答例外インターセプターはバックグラウンド呼び出しを再開するのに役立ちます。

インターセプターコア

傍受サービス工場

var app = angular.module("ajaxHttp", []);
app.factory("httpInterceptor", [ "$q", "$rootScope", function($q, $rootScope) {
return {
request: function(config) {
// do something on request success
return config || $q.when(config);
},
　　 requestError: function(rejection) {
　　　　 // do something on request error
　　　　 return $q.reject(rejection)
　　 },
response: function(response) {
// do something on response success
return response || $q.when(response);
},
responseError : function(rejection) {
// do something on response error
return $q.reject(rejection);
}
};
}]); 

インターセプトファクトリーメソッドを登録します

app.config(["$httpProvider", function($httpProvider) {
　　$httpProvider.interceptors.push("httpInterceptor");
}]); 

例

401 と 404 の傍受と処理

app.config(["$httpProvider", function($httpProvider) { 
$httpProvider.interceptors.push('httpInterceptor'); 
}]); 
app.factory("httpInterceptor", ["$q", "$injector", function($q, $injector) {
return {
"responseError": function(response) {
if (response.status == 401) {
var rootScope = $injector.get('$rootScope');
var state = $injector.get('$rootScope').$state.current.name;
rootScope.stateBeforLogin = state;
rootScope.$state.go("login");
return $q.reject(response);
}
else if (response.status === 404) {
console.log("404!");
return $q.reject(response);
}
}
};
]);

上記のコンテンツは、AngularJs HTTP レスポンス インターセプターをすばやく学習するための関連知識を共有することを目的としています。気に入っていただければ幸いです。Script House Web サイトを引き続きサポートしていただきありがとうございます。