AngularJs HTTP レスポンス interceptor_AngularJS の簡単な分析-jsチュートリアル-php.cn

AngularJs HTTP レスポンス interceptor_AngularJS の簡単な分析

WBOY

リリース： 2016-05-16 15:23:04

オリジナル

2261 人が閲覧しました

なぜインターセプターを使用するのでしょうか?

いつでも、認証やエラー処理などのグローバル機能をリクエストに追加したい場合は、リクエストがサーバーに送信される前、またはサーバーが戻ったときにリクエストをインターセプトする方が良い方法です。

angularJs は、インターセプターを介してグローバルレベルから処理する方法を提供します。

インターセプターにより次のことが可能になります:

リクエストメソッドを実装してリクエストをインターセプトする: このメソッドは、$http がリクエストをバックグラウンドに送信する前に実行されるため、構成を変更したり、他の操作を実行したりできます。このメソッドはリクエスト構成オブジェクトをパラメーターとして受け取り、構成オブジェクトまたは Promise を返す必要があります。無効な構成オブジェクトまたは Promise が返された場合、それは拒否され、$http 呼び出しが失敗します。

応答メソッドを実装して応答をインターセプトする: このメソッドは、$http がバックグラウンドから応答を受信した後に実行されるため、応答を変更したり、他の操作を実行したりできます。このメソッドは応答オブジェクトをパラメータとして受け取り、応答オブジェクトまたは Promise を返す必要があります。応答オブジェクトには、要求構成、ヘッダー、ステータス、およびバックグラウンドからのデータが含まれます。無効な応答オブジェクトが返された場合、または Promise が拒否された場合、$http 呼び出しは失敗します。

requestError メソッドを実装してリクエストの例外をインターセプトする: リクエストの送信に失敗したり、インターセプターによって拒否されたりすることがあります。リクエスト例外インターセプターは、前のリクエストインターセプターによって中断されたリクエストをキャプチャします。これは、リクエストを復元したり、場合によっては、プログレスバーを閉じたり、ボタンや入力ボックスをアクティブにしたりするなど、リクエストの前に行われた設定を元に戻すために使用できます。

responseError メソッドを実装して、応答例外をインターセプトします。バックグラウンド呼び出しが失敗する場合があります。リクエストインターセプターによって拒否されたか、前の応答インターセプターによって中断された可能性もあります。この場合、応答例外インターセプターはバックグラウンド呼び出しを再開するのに役立ちます。

インターセプターのコアはサービスファクトリであり、$httpprovider.interceptors 配列に追加されます。 $httpProvider に登録します。

AngularJs は、2 つの成功インターセプター (request、response) と 2 つの失敗インターセプター (requestError、responseError) を含む 4 つのインターセプターを提供します。

サービスに 1 つ以上のインターセプターを追加します:

angular.module("myApp", []) 
  .factory('httpInterceptor', [ '$q', '$injector',function($q, $injector) { 
    var httpInterceptor = { 
      'responseError' : function(response) { 
        ...... 
        return $q.reject(response); 
      }, 
      'response' : function(response) { 
        ...... 
        return response; 
      }, 
      'request' : function(config) { 
        ...... 
        return config; 
      }, 
      'requestError' : function(config){ 
        ...... 
        return $q.reject(config); 
      } 
    } 
  return httpInterceptor; 
}

ログイン後にコピー

次に、$httpProvider を使用して .config() 関数にインターセプターを登録します

angular.module("myApp", []) 
.config([ '$httpProvider', function($httpProvider) { 
  $httpProvider.interceptors.push('httpInterceptor'); 
} ]);

ログイン後にコピー

実際の例: (401、404 の傍受)

routerApp.config([ '$httpProvider', function($httpProvider) { 
    $httpProvider.interceptors.push('httpInterceptor'); 
  } ]); 
  routerApp.factory('httpInterceptor', [ '$q', '$injector',function($q, $injector) { 
    var httpInterceptor = { 
      'responseError' : function(response) { 
        if (response.status == 401) { 
          var rootScope = $injector.get('$rootScope'); 
          var state = $injector.get('$rootScope').$state.current.name; 
          rootScope.stateBeforLogin = state; 
          rootScope.$state.go("login"); 
          return $q.reject(response); 
        } else if (response.status === 404) { 
          alert("404!"); 
          return $q.reject(response); 
        } 
      }, 
      'response' : function(response) { 
        return response; 
      } 
    } 
    return httpInterceptor; 
  }  
]);

ログイン後にコピー

セッションインジェクション (リクエストインターセプター)

サーバー側認証を実装するには 2 つの方法があります。 1 つ目は、従来の Cookie ベースの認証です。ユーザーは、サーバー側の Cookie によってリクエストごとに認証されます。もう 1 つの方法は、トークンベースの検証です。ユーザーがログインすると、バックグラウンドから sessionToken を取得します。 sessionToken はサーバー側で各ユーザーを識別し、サーバーに送信されるすべてのリクエストに含まれます。

次の sessionInjector は、キャプチャされた各リクエストに x-session-token ヘッダーを追加します (現在のユーザーがログインしている場合):

<!-- lang: js -->
module.factory('sessionInjector', ['SessionService', function(SessionService) {
  var sessionInjector = {
    request: function(config) {
      if (!SessionService.isAnonymus) {
        config.headers['x-session-token'] = SessionService.token;
      }
      return config;
    }
  };
  return sessionInjector;
}]);
module.config(['$httpProvider', function($httpProvider) {
  $httpProvider.interceptors.push('sessionInjector');
}]);

ログイン後にコピー

次にリクエストを作成します:

<!-- lang: js -->
$http.get('https://api.github.com/users/naorye/repos');

ログイン後にコピー

sessionInjector によってインターセプトされる前の構成オブジェクトは次のようになります:

<!-- lang: js -->
{
  "transformRequest": [
    null
  ],
  "transformResponse": [
    null
  ],
  "method": "GET",
  "url": "https://api.github.com/users/naorye/repos",
  "headers": {
    "Accept": "application/json, text/plain, */*"
  }
}

ログイン後にコピー

sessionInjector によってインターセプトされた後の構成オブジェクトは次のようになります:

<!-- lang: js -->
{
  "transformRequest": [
    null
  ],
  "transformResponse": [
    null
  ],
  "method": "GET",
  "url": "https://api.github.com/users/naorye/repos",
  "headers": {
    "Accept": "application/json, text/plain, */*",
    "x-session-token": 415954427904
  }
}

ログイン後にコピー

上記のコンテンツでは、AngularJs HTTP レスポンスインターセプターの関連知識を紹介しています。この記事を共有することが役立つことを願っています。