[AngularJS 1]ウェブデザイナーがはじめるAngularJS：$httpProviderのInterceptorsを使ってリクエスト・レスポンスを操作する

この記事は書かれてから1年以上経過しており、内容が古い場合があります。

はじめに

前回、ウェブデザイナーがはじめるAngularJS：Promise（Deferred）をつかった非同期処理でPromiseについて覚えたところで、今回はPromiseを理解していることを前提にグローバルなエラー処理やリクエスト直前／リクエスト直後に処理を加えることができるInterceptors（傍受）について覚えたことをメモしておきます。

Interceptorsとは

グローバルのエラー処理、認証、またはあらゆる種類の同期または非同期の、リクエストの前処理、またはレスポンスの後処理のために、サーバに引き渡される前にリクエストを、そして、これらのリクエストを行ったアプリケーションコードに引き渡される前にレスポンスを、それぞれ傍受できることが望ましいでしょう。インターセプターは、この同期および非同期の前処理の必要性を満たすために、 promise APIを活用します。

ということで、エラー等の処理を非同期通信処理1つ1つに指定しなくても共通した処理を指定できる便利な機能ということですね。

インターセプターメソッドはリジェクション系のエラーを含めて4つあります。

Request：リクエストの際に呼ばれる
RequestError：リクエストに何らかのエラーがあった場合に呼ばれる
response：レスポンスがあった際に呼ばれる
responseError：レスポンスに何らかのエラーがあった場合に呼ばれる

記述方法

factoryに外だしする方法もありますが、とりあえず簡単に記述したものがこれです。

// Interceptors
service.config(['$httpProvider', function($httpProvider) {
  $httpProvider.interceptors.push(function($q){
    return {
      request: function(config) {
        console.log('Request: ', config);
        // ...
        return config;
      },
      requestError: function(rejection) {
        console.log('Interceptor requestError: ', rejection);
        // ...
        return $q.reject(rejection); //結果がthen()に渡されエラー処理が実行される
      },
        response: function(config) {
        console.log('Response: ', config);
        // ...
        return config;
        },
      responseError: function(rejection) {
        console.log('Interceptor responseError: ', rejection.statusText);
        // ...
        return $q.reject(rejection); 
      }
    }
  });
}]);

リクエスト・レスポンスの引数configにはリクエスト・レスポンスのオブジェクトがそのまま入っています。このオブジェクトにheadersを追加したり、レスポンスの内容を見てグローバルスコープに何かを追加したりすることで一々コントローラー毎に処理させる必要がなくなります。エラーの場合はリダイレクトやユーザーへのエラー通知に使えますね。

サンプル

実際に非同期通信をしてInterceptorsを使ったサンプルがこちら。エラーやオブジェクトはコンソールにも表示されます。

今回はここまで。
以下のサイトも参考になります。

参考

シリーズ

ウェブデザイナーがはじめるAngularJS：AngularJS向けのディレクティブが用意されたUI Bootstrap

2015-07-06
AngularJS 1, Bootstrap 3, Middleman 3

ウェブデザイナーがはじめるAngularJS：コントローラ間の連携

2015-05-21
AngularJS 1

ウェブデザイナーがはじめるAngularJS：Middlemanでng-annotateを使ったMinify対策

2015-05-19
AngularJS 1, Middleman 3

ウェブデザイナーがはじめるAngularJS：Promise（Deferred）をつかった非同期処理

2015-04-27
AngularJS 1

ウェブデザイナーがはじめるAngularJS：イベント系ディレクティブを試す

2015-04-27
AngularJS 1

ウェブデザイナーがはじめる AngularJS シリーズウェブデザイナーがはじめるAngularJS：$httpProviderのInterceptorsを使ってリクエスト・レスポンスを操作する