Глобальный загрузчик ajax состояния $http AngularJS

У меня есть приложение AngularJS, и мне нужен загрузчик ajax для каждого запроса, выполняемого $http - есть ли простой способ сделать это.

Теперь мое решение состоит в том, чтобы установить $rootScope.loading = 1 каждый раз, когда я вызываю $http, и в случае успеха установить $rootScope.loading = 0..

Какова «лучшая практика» для этого?

Мой код теперь выглядит так:

$rootScope.loading = 1;
$http({method : "POST", url:url, data: utils.params(data), headers: {'Content-Type': 'application/x-www-form-urlencoded'}}).success(function() {
    $rootScope.loading = 0;
});

angularjs angular-http angularjs-scope
person pkdkk    schedule 01.09.2014    source источник

Ответы (2)


arrow_upward
9
arrow_downward

В этом случае будет лучше использовать interceptor в любое время, когда мы хотим обеспечить глобальную функциональность на всех наших запросов, таких как аутентификация, обработка ошибок и т. д., полезно иметь возможность перехватывать все запросы до того, как они перейдут на сервер и обратно с сервера.

angular.module('myApp')
.factory('myInterceptor',
function ($q,$rootScope) {
    var interceptor = {
        'request': function (config) {
         $rootScope.loading = 1;
        // Successful request method
            return config; // or $q.when(config);
        },
        'response': function (response) {
         $rootScope.loading = 0;
        // successful response
            return response; // or $q.when(config);
        },
        'requestError': function (rejection) {
            // an error happened on the request
            // if we can recover from the error
            // we can return a new request
            // or promise
            return response; // or new promise
                // Otherwise, we can reject the next
                // by returning a rejection
                // return $q.reject(rejection);
        },
        'responseError': function (rejection) {
            // an error happened on the request
            // if we can recover from the error
            // we can return a new response
            // or promise
            return rejection; // or new promise
                // Otherwise, we can reject the next
                // by returning a rejection
                // return $q.reject(rejection);
        }
    };
    return interceptor;
});

и прописать его в конфиг

angular.module('myApp')
  .config(function($httpProvider) {
   $httpProvider.interceptors.push('myInterceptor');
});

пример из ng-book

person Narek Mamikonyan    schedule 01.09.2014

arrow_upward
1
arrow_downward

Используйте http перехватчик, чтобы перехватывать все ваши $http запросы\ответы и выполнять в них логику.

Вот пример создания собственного.
вот пример готовый модуль.

person Amir Popovich    schedule 01.09.2014