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

wp-admin

7年前

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

デモとコードサンプルはこちら。
　
※目次をクリックすると目次の下部にコンテンツが表示されます。

１．$httpサービスのinterceptorの概要
２．interceptorの種類
３．interceptorの設定方法
４．サンプルコード

$httpサービスのinterceptorの概要

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

interceptorの種類

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

interceptorの設定方法

サービスとして登録する方法とアノニマスのファクトリを使って登録する方法がある。
　
１）アノニマスのファクトリを使って登録する方法
　

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);
      }
    }
  })
});

　
２）サービスとして登録する方法
　

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');
});

サンプルコード

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