AngularJS
HTTPインターセプタ
サーチ…
前書き
AngularJSの$ httpサービスは、バックエンドと通信してHTTPリクエストを行うことができます。サーバーに送信する前に、すべての要求を取得して操作する場合があります。それ以外の場合は、コールを完了する前にレスポンスを取得して処理したい場合があります。グローバルなHTTPエラー処理もそのような必要性の良い例になります。インターセプタはそのような場合に正確に作成されます。
入門
Angularの組み込み$httpサービスを使用すると、HTTPリクエストを送信できます。しばしば、リクエストの前後に、例えば各リクエストに認証トークンを追加する、または一般的なエラー処理ロジックを作成するなどの作業が必要になります。
一般的なhttpInterceptorを段階的に
次の内容のHTMLファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<title>Angular Interceptor Sample</title>
<script src="https://code.angularjs.org/1.5.8/angular.min.js"></script>
<script src="app.js"></script>
<script src="appController.js"></script>
<script src="genericInterceptor.js"></script>
</head>
<body ng-app="interceptorApp">
<div ng-controller="appController as vm">
<button ng-click="vm.sendRequest()">Send a request</button>
</div>
</body>
</html>
「app.js」というJavaScriptファイルを追加します：
var interceptorApp = angular.module('interceptorApp', []);
interceptorApp.config(function($httpProvider) {
$httpProvider.interceptors.push('genericInterceptor');
});
'appController.js'という別のものを追加してください：
(function() {
'use strict';
function appController($http) {
var vm = this;
vm.sendRequest = function(){
$http.get('http://google.com').then(function(response){
console.log(response);
});
};
}
angular.module('interceptorApp').controller('appController',['$http', appController]);
})();
そして、最後に、インターセプタ自体 'genericInterceptor.js'を含むファイル：
(function() {
"use strict";
function genericInterceptor($q) {
this.responseError = function (response) {
return $q.reject(response);
};
this.requestError = function(request){
if (canRecover(rejection)) {
return responseOrNewPromise
}
return $q.reject(rejection);
};
this.response = function(response){
return response;
};
this.request = function(config){
return config;
}
}
angular.module('interceptorApp').service('genericInterceptor', genericInterceptor);
})();
'genericInterceptor'は可能な関数をカバーし、アプリケーションに特別な振る舞いを追加することができます。
HTTPインターセプタを使用した応答時のフラッシュメッセージ
ビューファイル
角度のスクリプトやアプリケーション間で共有されるHTMLを通常含む基本HTML（index.html）では、空のdiv要素のままにしておくと、このdiv要素の内側にフラッシュメッセージが表示されます
<div class="flashmessage" ng-if="isVisible">
{{flashMessage}}
</div>
スクリプトファイル
角モジュールのconfigメソッドでは、httpProviderを挿入し、httpProviderにはインターセプタ配列プロパティがあり、カスタムインターセプタをプッシュします。現在の例では、カスタムインターセプタは応答のみをインターセプトし、rootScopeに付加されたメソッドを呼び出します。
var interceptorTest = angular.module('interceptorTest', []);
interceptorTest.config(['$httpProvider',function ($httpProvider) {
$httpProvider.interceptors.push(["$rootScope",function ($rootScope) {
return { //intercept only the response
'response': function (response)
{
$rootScope.showFeedBack(response.status,response.data.message);
return response;
}
};
}]);
}])
プロバイダのみが角モジュール（httpProviderであり、rootスコープではない）のconfigメソッドに注入できるので、角モジュールのrunメソッドの中でrootscopeに添付されたメソッドを宣言します。
また、$ timeoutの中にメッセージを表示すると、メッセージにはフラッシュプロパティがあります。これは、しきい値時間後に消えています。この例では3000 msです。
interceptorTest.run(["$rootScope","$timeout",function($rootScope,$timeout){
$rootScope.showFeedBack = function(status,message){
$rootScope.isVisible = true;
$rootScope.flashMessage = message;
$timeout(function(){$rootScope.isVisible = false },3000)
}
}]);
共通の落とし穴
$ rootScopeやその他のサービスを角モジュールのコンフィグ レーションメソッドの中に注入しようとすると、角型アプリケーションのライフサイクルはそのことを許さず、未知のプロバイダエラーが発生します。角モジュールのコンフィグレーションメソッドでプロバイダのみをインジェクトすることができます