AngularJS $httpサービスのinterceptorの使用方法をサンプルコードを作成しました。
デモとコードサンプルはこちら。
※目次をクリックすると目次の下部にコンテンツが表示されます。
$httpサービスのinterceptorの概要
・http処理に対するエラーハンドリング、認証、リクエストの前処理、レスポンスの後処理などを設定する事が出来る。
・クライアントが送信を実行しサーバーにhttpリクエストを送信する前と、サーバーからレスポンス受信しクライアントのビューに表示する前の段階に、インターセプトする形で処理を追加する事が出来る。
・$httpProviderのinterceptors配列に処理内容を記述した関数を追加する。
・クライアントが送信を実行しサーバーにhttpリクエストを送信する前と、サーバーからレスポンス受信しクライアントのビューに表示する前の段階に、インターセプトする形で処理を追加する事が出来る。
・$httpProviderのinterceptors配列に処理内容を記述した関数を追加する。
interceptorの種類
下記4つのinterceptorを設定できる。
①request
・$httpサービスのリクエストに設定するconfigオブジェクトを引数として渡し、定義した関数内で自由にこのconfigオブジェクトを変更したり、新しいものを作成したり出来る。
この関数は、configオブジェクトを直接、またはpromiseとして返す必要がある。
②requestError
・$httpサービスのリクエストがrejectされた時にトリガーされる。
・rejectのreasonが引数として渡される。
③response
・$httpサービスのレスポンス受信時のresponseオブジェクトが引数として渡され、定義した関数内で自由にこのresponseオブジェクトを変更したり、新しいものを作成したり出来る。
この関数は、responseオブジェクトを直接、またはpromiseとして返す必要がある。
④responseError
・サーバーからのレスポンスのステータスコードが200以外の場合に実行される
・rejectのreasonが引数として渡される。
①request
・$httpサービスのリクエストに設定するconfigオブジェクトを引数として渡し、定義した関数内で自由にこのconfigオブジェクトを変更したり、新しいものを作成したり出来る。
この関数は、configオブジェクトを直接、またはpromiseとして返す必要がある。
②requestError
・$httpサービスのリクエストがrejectされた時にトリガーされる。
・rejectのreasonが引数として渡される。
③response
・$httpサービスのレスポンス受信時のresponseオブジェクトが引数として渡され、定義した関数内で自由にこのresponseオブジェクトを変更したり、新しいものを作成したり出来る。
この関数は、responseオブジェクトを直接、またはpromiseとして返す必要がある。
④responseError
・サーバーからのレスポンスのステータスコードが200以外の場合に実行される
・rejectのreasonが引数として渡される。
interceptorの設定方法
サービスとして登録する方法とアノニマスのファクトリを使って登録する方法がある。
1)アノニマスのファクトリを使って登録する方法
1)アノニマスのファクトリを使って登録する方法
var demoApp = angular.module('demoApp', []); demoApp.config(function($httpProvider) { $httpProvider.interceptors.push(function ($q) { return { request: function(config) { : return config; }, requestError: function(rejection) { : return $q.reject(rejection); }, response: function(response) { : return response; }, responseError: function(rejection) { : return $q.reject(rejection); } } }) });
2)サービスとして登録する方法
var demoApp = angular.module('demoApp', []); demoApp.factory('myInterceptor', function($q) { return { request: function(config) { : return config; }, requestError: function(rejection) { : return $q.reject(rejection); }, response: function(response) { : return response; }, responseError: function(rejection) { : return $q.reject(rejection); } }; }); demoyApp.config(function($httpProvider) { $httpProvider.interceptors.push('myInterceptor'); });
サンプルコード
・4つのinterceptorの関数を定義し、それぞれの関数内でブラウザのコンソールにログを出力しています。
・requestのinterceptorでHTTPのヘッダーを追加しています。
・存在しないURLに対するリクエストを送信し、エラー発生時の動作内容も確認出来るようにしています。
デモとコードサンプルはこちら。
・requestのinterceptorでHTTPのヘッダーを追加しています。
・存在しないURLに対するリクエストを送信し、エラー発生時の動作内容も確認出来るようにしています。
デモとコードサンプルはこちら。
AngularJSの特徴、仕組み
ビルトインディレクティブ
- ビルトインのディレクティブの概要
- データバインディングのディレクティブの概要
- ng-repeatを使ってリスト、テーブル、フィルター
- ng-includeを使って別のHTMLファイルを埋め込み
- ng-switchを使って内部にあるHTMLテンプレートの表示を切り替え
- ng-if、ng-show、ng-hideを使って表示、非表示を切り替え
- ng-class、ng-styleを使ってCSSを設定
- イベント処理
- 有効、無効を切替えるディレクティブ
- フォームの入力チェックを行い、動的にCSS追加
- ng-optionsを使ってSelectメニューを作成
- ng-repeatを使ってラジオボタンを作成
- ビルトインのフィルターの使用方法
- ビルトインのフィルターで関数を使用
- カスタムフィルターの使用方法
- Bootstrap3を使ってページング
- スクリプト内でフィルターを使用、既存のフィルターを拡張
サービス
- サービスの概要とfactory、service、providerの使い分け
- $qサービスでpromise/deferredパターン
- $httpサービスの概要、サーバーからJSONデータ取得
- $httpサービスのPOSTでデータ送信
- $qサービスを使ってhttpリクエストを複数実行
- $httpサービスのinterceptorの使用方法
- AngularJSのwithCredentialsの設定、CORS
- $timeoutサービスと$intervalサービス
- $resourceサービスを使ってREST
- $locationサービスを使ってURLを操作
- $routeサービスと$resourceサービスを使ったサンプルを作成
- routeChangeSuccessを使ってflashメッセージ表示
- JavaScript、CSSを含むHTMLデータをバインドして表示
カスタムディレクティブ
AngularJSの特徴、仕組み
ビルトインディレクティブ
- ビルトインのディレクティブの概要
- データバインディングのディレクティブの概要
- ng-repeatを使ってリスト、テーブル、フィルター
- ng-includeを使って別のHTMLファイルを埋め込み
- ng-switchで内部にあるHTMLテンプレートの表示を切り替え
- ng-if、ng-show、ng-hideを使って表示、非表示を切り替え
- ng-class、ng-styleを使ってCSSを設定
- イベント処理
- 有効、無効を切替えるディレクティブ
- フォームの入力チェックを行い、動的にCSS追加
- ng-optionsを使ってSelectメニューを作成
- ng-repeatを使ってラジオボタンを作成
- ビルトインのフィルターの使用方法
- ビルトインのフィルターで関数を使用
- カスタムフィルターの使用方法
- Bootstrap3を使ってページング
- スクリプト内でフィルターを使用、既存のフィルターを拡張
サービス
- サービスの概要とfactory、service、providerの使い分け
- $qサービスでpromise/deferredパターン
- $httpサービスの概要、サーバーからJSONデータ取得
- $httpサービスのPOSTでデータ送信
- $qサービスを使ってhttpリクエストを複数実行
- $httpサービスのinterceptorの使用方法
- AngularJSのwithCredentialsの設定、CORS
- $timeoutサービスと$intervalサービス
- $resourceサービスを使ってREST
- $locationサービスを使ってURLを操作
- $routeサービスと$resourceサービスを使ったサンプルを作成
- routeChangeSuccessを使ってflashメッセージ表示
- JavaScript、CSSを含むHTMLデータをバインドして表示
カスタムディレクティブ