AngularJS $httpサービスのinterceptorの使用方法

AngularJS $httpサービスのinterceptorの使用方法をサンプルコードを作成しました。

デモとコードサンプルはこちら
 

(1)$httpサービスのinterceptorの概要


 
・http処理に対するエラーハンドリング、認証、リクエストの前処理、レスポンスの後処理などを設定する事が出来ます。
 
・クライアントが送信を実行し、サーバーにhttpリクエストを送信する前とサーバーからレスポンス受信し、クライアントのビューに表示する前の段階にインターセプトする形で処理を追加する事が出来ます。
 
・$httpProviderのinterceptors配列に処理内容を記述した関数を追加します。
 

(2)interceptorの種類

下記4つのinterceptorを設定できます。
 
①request
 
・$httpサービスのリクエストに設定するconfigオブジェクトを引数として渡し、定義した関数内で自由にこのconfigオブジェクトを変更したり、新しいものを作成したり出来ます。
 
・この関数は、configオブジェクトを直接、またはpromiseとして返す必要があります。
 
②requestError
 
・$httpサービスのリクエストがrejectされた時にトリガーされます。
 
・rejectのreasonが引数として渡されます。
 
③response
 
・$httpサービスのレスポンス受信時のresponseオブジェクトが引数として渡され、定義した関数内で自由にこのresponseオブジェクトを変更したり、新しいものを作成したり出来ます。
 
・この関数は、responseオブジェクトを直接、またはpromiseとして返す必要があります。
 
④responseError
 
・サーバーからのレスポンスのステータスコードが200以外の場合に実行されます
 
・rejectのreasonが引数として渡されます。
 

(3)interceptorの設定方法


 
サービスとして登録する方法とアノニマスのファクトリを使って登録する方法があります。
 
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)サンプルコード


 
・4つのinterceptorの関数を定義し、それぞれの関数内でブラウザのコンソールにログを出力しています。
 
・requestのinterceptorでHTTPのヘッダーを追加しています。
 
・存在しないURLに対するリクエストを送信し、エラー発生時の動作内容も確認出来るようにしています。
 
デモとコードサンプルはこちら

関連記事の目次

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です