web-dev-qa-db-ja.com

AngularJSはすべての$ http JSON応答をインターセプトします

AngularJSとすべてのリクエストをJSON形式で配信するサーバー側のバックエンドを使用して構築されたアプリケーションがあります。すべてのリクエストは、リクエスト固有のデータを含むデータ変数を含むJSONコンテナにラップされます。他のデータは、アプリケーション内で状態と制御を維持し、エラーと成功メッセージをチェックし、セッションフラグをチェックするために使用されます。これらの他の変数はすべて、すべてのリクエストで処理され、データ変数が送信される前に最初に検査されます。

現時点では、最初にJSON応答の内容を調べ、次にデータ自体を調べる方法があります。

$http.get('something.json').success(function(response) {
   var data = examineJSONResponse(response);
   //do the data stuff
});

これは機能し、examineJSONResponseはコードを調べ、何か問題がある場合は例外をスローし、window.location.hrefを使用してページをリロードします。

これをAngularJS内で自動化する方法はありますか？$ http呼び出しが行われるたびにこれをチェックし、データ変数の内容のみをJSON応答として返しますか？

jsonangularjsinterceptor
48
matsko

Angular 1.1.4+でインターセプターを$httpProvider.interceptorsに追加することにより、応答をインターセプトできます（ドキュメントを参照してください here インターセプターの検索）。

Jsonのような特定のコンテンツタイプの場合、呼び出しが成功した場合でも、変更を拒否したり、例外をスローしたりできます。ここでもコントローラーコードに渡されるresponse.dataを変更できます。

myModule.factory('myHttpInterceptor', function ($q) {
    return {
        response: function (response) {
            // do something on success
            if(response.headers()['content-type'] === "application/json; charset=utf-8"){
                // Validate response, if not ok reject
                var data = examineJSONResponse(response); // assumes this function is available

                if(!data)
                    return $q.reject(response);
            }
            return response;
        },
        responseError: function (response) {
            // do something on error
            return $q.reject(response);
        }
    };
});
myModule.config(function ($httpProvider) {
    $httpProvider.interceptors.Push('myHttpInterceptor');
});

注：1.1.4より前のバージョンの元の回答は次のとおりです（responseInterceptorsはAngular 1.1で非推奨になりました） .4）：

もっと良い方法があるかもしれませんが、http応答インターセプターで this post に似たことができると思います（ here ）（jsonのような特定のコンテンツタイプ）呼び出しが成功した場合でも、変更を拒否するか、例外をスローする可能性があります。ここでも、コントローラーコードに渡されるresponse.dataを変更できます。

myModule.factory('myHttpInterceptor', function ($q) {
    return function (promise) {
        return promise.then(function (response) {
            // do something on success
            if(response.headers()['content-type'] === "application/json; charset=utf-8"){
                // Validate response if not ok reject
                var data = examineJSONResponse(response); // assumes this function is available

                if(!data)
                    return $q.reject(response);
            }
            return response;
        }, function (response) {
            // do something on error
            return $q.reject(response);
        });
    };
});
myModule.config(function ($httpProvider) {
    $httpProvider.responseInterceptors.Push('myHttpInterceptor');
});
90
Gloopy

別の解決策は、サービスを作成し、それを$ http変数の周りで使用することです。

angular.module('App', [])
  .factory('myHttp',['$http',function($http) {
    return function(url, success, failure) {
      $http.get(url).success(function(json) {
          var data = examineJSONResponse(json);
          data && data.success ? success() : failure();
        }).error(failure);
      );
    }
}]);

そして今、これは次のように呼び出すことができます：

myHttp(url, onSuccess, onFailure);
7
matsko