11

Estoy desarrollando una aplicación con AngularJS y necesito definir un gancho (handler) que se ejecute antes y después de cada transacción ajax realizada con el objeto $http. He visto que para jQuery existen los métodos ajaxStart y ajaxStop, pero evidentemente no funcionan en este caso. ¿Existe algún equivalente directo, o se puede conseguir de alguna forma el mismo efecto, en AngularJS? La documentación no parece mencionar nada al respecto.

Nótese que quiero que el código se ejecute para todas las transacciones, no para una en concreto (en ese caso incluiría el código en los delegados .then).

2
  • 2
    ahora no tengo tiempo de responder, pero puedes utilizar $http interceptor el 3 dic. 2015 a las 10:40
  • Gracias, estaba delante de mis narices y no lo había visto :-) Si conviertes el comentario en una respuesta la aceptaré.
    – Konamiman
    el 3 dic. 2015 a las 10:42

2 respuestas 2

8

Como dice @rnrneverdies puedes usar el $interceptor.

¿Que es el $interceptor?

El $httpProvider contiene un array de interceptores, un interceptor es un simple servicio factory que es el encargado de interceptar la peticion, ya sea cuando esta comenzando (Haciendo un Ajax Start), cuando esta devolviendo la respuesta (Ajax Stop) o cuando falla, esto nos sirve para el manejo de errores o procesar algo antes/después del request. una de las formas de crearlo es la siguiente:

Te creas un Service factory (Servicio de fabrica)

app.factory('HttpInterceptor',['$q','$rootScope','$injector',
    function($q, $rootScope, $injector) {
            return {
                    'request' : function(config) {
                                config.headers['X-Auth-Token'] = $rootScope.token;
                                config.headers['test_Auth-Token'] = $rootScope.token;
                                config.headers['Cache-Control'] = 'no-cache, no-store, max-age=0, must-revalidate';
                                // do something on success
                                return config;
                    },
                    'requestError' : function(rejection) {
                                        console.log("Ejecutando el 'requestError' de interceptor <<");
                                        return $q.reject(rejection);
                    },
                    'response' : function(response) {
                                        return response;
                    },
                    'responseError' : function(rejection) {
                                        if (rejection.status === 401) {
                                            console.log("Response Error 401",
                                                    rejection);
                                        }
                      console.log(">>> Falle <<");
                        return $q.reject(rejection);
                    }
}}]);

Nota:

Los metodos que vez en la parte de arriba como lo son 'request', 'responseError' entre otros es la forma de como Angular captura que esta haciendo la request (petición) o que esta dando error. Como podras ver solo hay esos 4 métodos según la documentacion.

¿Cómo invoco mi interceptor?

Solo necesitas en un app.js o donde este tu modulo crear el config de angular y llamar al $httpProvider.interceptors asi:

app.config(['$routeProvider','$locationProvider','$httpProvider',
    function($routeProvider, $locationProvider, $httpProvider) {
          $httpProvider.interceptors.push('sacgHttpInterceptor');
     //Codigo demo no completo faltan los tags de cierre
2
  • Buena respuesta, gracias. Un apunte: creo que "Service factory" se traduciría mejor como "Fábrica de servicios".
    – Konamiman
    el 3 dic. 2015 a las 11:23
  • @Konamiman de nada, ese código es que el uso actualmente y me funciona al 100%, y para eso estamos para aprender y ayudarnos :) mmm eso de "Service factory" tengo mis dudas jajajaa dejame ver y lo cambio.
    – Wilfredo
    el 3 dic. 2015 a las 11:26
4

Como ya te comentaron, se realiza con Interceptores

Casi todos los utilizamos para lo mismo, ejemplo para poder ubicar el codigo de las acciones a realizar en cada petición/request de ajax (sea para autenticar - ejemplo con JWT, bloquear la ui con elementos de cargando, etc)

Coloco otro ejemplo, organizando en módulos Por ejemplo si tenemos modularizada nuestra app en varios archivos (por mas que se pueda en el mismo archivo varios módulos)

miApp.js

(function(ng) {
var miApp = ng.module('miApp', [
    'ui.bootstrap',
    'miApp.modulos'
]);

//...

miApp.config(['$httpProvider', function ($httpProvider) {
    $httpProvider.interceptors.push('miApp.factory.authInterceptor');
    $httpProvider.interceptors.push('miApp.factory.messageInterceptor');
    $httpProvider.interceptors.push('miApp.factory.loadingInterceptor');
    //...
}]);

//...

 })(angular)

Como veras, se pueden agregar interceptors es un array de servicios Se tendria que tener un archivo previamente cargando con loadingInterceptor.factory.miApp.js

(function (ng, dn) {
var miApp = ng.module('miApp');

miApp.factory('miApp.factory.loadingInterceptor', [
    '$q',
    loadingInterceptorFactory
]);

function loadingInterceptorFactory($q) {
    var service = {
        request: request,
        requestError: requestError,
        response: response,
        responseError: responseError
    };
    return service;

    function request(config) {
        //acciones al solicitar la peticion            
        return config;
    }

    function requestError(rejection) {
        //acciones para cuando arroja un error la peticion
        return $q.reject(rejection);
    }

    function response(response) {
        //acciones para cuando se recibe la respuesta
        return response;
    }

    function responseError(rejection) {
        //acciones para cuando la respuesta arroja un error
        return $q.reject(rejection);
    }
}
})(angular, miApp)

Me parece que queda un poco mas "legible" el código, y puedes ir separando las Fabricas de Servicio para interceptar, modularizando tu app AngularJS

Enlaces que te pueden servir de ayuda o guia

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.