Angularjs 中的 jQuery ajax beforeSend 等价物是啥？

Posted 2023-02-19

【中文标题】Angularjs 中的 jQuery ajax beforeSend 等价物是啥？

【英文标题】：What is the equivalent of jQuery ajax beforeSend in Angularjs?Angularjs 中的 jQuery ajax beforeSend 等价物是什么？

【发布时间】：2014-04-04 03:17:02

【问题描述】：

我熟悉Jquery AJAX call，它有不同的回调，比如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 != '')  
    
);

【参考方案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;
    
);

【参考方案2】：

您可以使用interceptors。在 Angular $http documentation 中搜索词 interceptor

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

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

编辑

正如 Satpal 评论的那样，小提琴中使用的 $httpProvider.responseInterceptors 是 deprecated。你应该改用$httpProvider.interceptors。

【讨论】：

$httpProvider.responseInterceptors 已弃用。您应该提供$httpProvider.interceptors

的示例