web-dev-qa-db-fra.com

AngularJS Intercepter toutes les réponses $ http JSON

J'ai une application construite en utilisant AngularJS et un backend côté serveur qui fournit toutes les demandes sous forme JSON. Chaque demande est enveloppée dans un conteneur JSON qui contient une variable de données qui contient les données spécifiques à la demande. Les autres données, qui sont utilisées pour conserver l'état et le contrôle au sein de l'application, rechercher les erreurs et les messages de réussite et rechercher les indicateurs de session. Toutes ces autres variables sont servies avec CHAQUE demande et sont examinées avant la variable de données.

À l'heure actuelle, j'ai une méthode pour examiner le contenu de la réponse JSON d'abord, puis les données elles-mêmes.

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

Cela fonctionne et examineJSONResponse examine le code et s'il y a quelque chose qui ne va pas, il lève une exception et recharge la page à l'aide de window.location.href.

Existe-t-il un moyen d'automatiser cela dans AngularJS afin que chaque fois qu'un appel $ http soit effectué, il vérifie cela et renvoie UNIQUEMENT le contenu de la variable de données en tant que réponse JSON?

jsonangularjsinterceptor
48
matsko

Vous pouvez intercepter les réponses en ajoutant un intercepteur à $httpProvider.interceptors Avec Angular 1.1.4+ (voir la documentation ici recherche d'intercepteurs).

Pour un type de contenu spécifique comme json, vous pouvez potentiellement rejeter les modifications ou lever une exception même si l'appel a réussi. Vous pouvez également modifier le response.data Qui sera transmis à votre code de contrôleur ici:

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

REMARQUE: Voici la réponse d'origine pour les versions antérieures à 1.1.4 (responseInterceptors étaient obsolètes avec Angular 1.1.4 ):

Il y a peut-être une meilleure façon mais je pense que vous pouvez faire quelque chose de similaire à ce post avec l'intercepteur de réponse http (décrit ici ) (pour un type de contenu spécifique comme json) où vous potentiellement rejeter les modifications ou lever une exception même si l'appel a réussi. Vous pouvez également modifier le response.data Qui sera transmis au code de votre contrôleur ici.

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

Une autre solution consiste à créer un service et à l'utiliser autour de la variable $ 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);
      );
    }
}]);

Et maintenant, cela peut être appelé comme:

myHttp(url, onSuccess, onFailure);
7
matsko