Что эквивалентно jQuery ajax перед отправкой в ​​Angularjs?

Я знаком с вызовом Jquery AJAX, который имеет разные обратные вызовы, такие как перед отправкой, успех, завершение и т. д.

Это пример вызова AJAX с Jquery:

$.ajax({
  url: 'register.php',
  type: 'POST',
  data: {name:name, email:email},
  beforeSend: function() {
       // show loading GIF
  },
  complete: function() {
      // hide loading GIF
  },
  success: function(data) {
      // parse response
  }
});

Я хочу добиться того же, используя AngularJS.

Есть ли обратный вызов, например beforeSend для запроса AngularJS AJAX? Пока это мой код, но я не уверен, где я могу использовать обратный вызов, такой как beforeSend (чтобы я мог отображать загружаемое изображение GIF) в моем коде:

$http.post('register.php', {'name': $scope.name, 'email': $scope.email})
.success(function(data, status, headers, config) {
    if (data != '') { 
    }
});

jquery ajax angularjs angularjs-http
person shasi kanth    schedule 03.03.2014    source источник

Ответы (2)


arrow_upward
11
arrow_downward

По умолчанию Angular не предоставляет функции beforeSend и complete, но вы можете реализовать их с помощью перехватчиков. Вот моя реализация:

(function() {
    var app = angular.module("app");

    app.factory("interceptors", [function() {

        return {

            // if beforeSend is defined call it
            'request': function(request) {

                if (request.beforeSend)
                    request.beforeSend();

                return request;
            },


            // if complete is defined call it
            'response': function(response) {

                if (response.config.complete)
                    response.config.complete(response);

                return response;
            }
        };

    }]);

})();

Затем вы должны зарегистрировать свой перехватчик следующим образом:

    (function () {
        var app = angular.module('app', ['ngRoute']);


        app.config(["$routeProvider", "$httpProvider", function ($router, $httpProvider) {    

            // Register interceptors service
            $httpProvider.interceptors.push('interceptors');

            $router.when("/", { templateUrl: "views/index.html" })


            .otherwise({ redirectTo: "/" });        
        }]);
    })();

После этого кода вы можете использовать его следующим образом:

var promise = $http({
    method: 'POST',
    url: constants.server + '/emails/send',
    data: model,
    beforeSend: function() {
        model.waiting = true;
    },
    complete: function() {
        model.waiting = false;
    }
});
person Ro.    schedule 19.11.2015

arrow_upward
7
arrow_downward

Вы можете использовать interceptors. Найдите слово interceptor в http://docs.angularjs.org/api/ng/service/$http по Angular.

Как сказано в документации : Для целей глобальной обработки ошибок, >аутентификации или любого вида синхронной или асинхронной предварительной обработки >запроса или постобработки ответов

Вот хороший пример скрипта, отображающий загружаемый gif перед отправкой вызова ajax.

ИЗМЕНИТЬ

Как прокомментировал Сатпал, $httpProvider.responseInterceptors, используемый в Fiddle, равен deprecated. Вместо этого вы должны использовать $httpProvider.interceptors.

person Merlin    schedule 03.03.2014
comment
$httpProvider.responseInterceptors УСТАРЕЛИ. Вы должны предоставить пример с $httpProvider.interceptors - person Satpal; 03.03.2014