在AngularJS中，与jQuery ajax beforeSend相当的是什么？

Question

我熟悉Jquery AJAX调用，它具有不同的回调函数，如beforeSend、success、complete等。

这是使用Jquery的示例AJAX调用：

$.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实现相同的功能。

在AngularJS的AJAX请求中是否有像beforeSend这样的回调函数？ 这是我目前的代码，但我不确定在哪里可以使用类似beforeSend的回调函数（以便我可以显示加载GIF图像）：

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

- shasi kanth

Answer 1

默认情况下，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;
    }
});

- Ro.

Answer 2

你可以使用拦截器。在Angular $http文档中搜索单词interceptor。

正如文档所述：用于全局错误处理、身份验证或任何类型的同步或异步请求前处理或响应后处理

这是一个很好的Fiddle示例，在发送Ajax调用之前显示加载gif。

编辑

正如Satpal所评论的那样，Fiddle中使用的$httpProvider.responseInterceptors已被弃用。你应该改用$httpProvider.interceptors。

- Merlin

---

$httpProvider.responseInterceptors已不再推荐使用。您应该提供一个带$httpProvider.interceptors的样例。 - Satpal