javascript - AngularJS http 调用(完整语法)

Question

我是 AngularJS 新手，并且 我需要知道我们是否可以在 Angular 中进行类似 Ajax 的 jQuery 调用，并且想知道它的完整语法， 如果有人可以帮助我制作整个代码语法。

jQuery 中的示例我可以做类似的事情 -

$.ajax(
{
      url: 'someURL',
      type: 'POST',
      async: false,
      data:
      {
          something: something,
          somethingelse: somethingelse
      },
      beforeSend: function()
      {
          $('#someID').addClass('spinner');
      },
      success: function(response)
      {
          $('#someID').removeClass('spinner');

          console.log(response);              
      },
      complete: function(response)
      {
           $('#someID').removeClass('spinner');

           console.log(response);
      },
      error: function (errorResp)
      {    
           console.log(errorResp);
      }
});

现在这是我在 Angular 中进行 http 调用时发现的内容， 需要帮助构建完整的语法以及所有可能的选项 -

var req = {

       method: 'POST',
       url: 'someURL',
       headers: {
            'Content-Type': undefined
       },
       data: {
             //goes in the Payload, if I'm not wrong 
             something: 'something' 
       },
       params:{
              //goes as Query Params
              something: 'something',
              somethingElse: 'somethingElse'
       }
}

$http(req)
.then(function()
{
   //success function    
}, 
function()
{
   //Error function    
});

现在，如果我想像 jQuery 一样在 BeforeSend 函数中的某个 id 上附加一个微调器，并成功删除该微调器，该怎么办？ Angular 的 BeforeSend 类似方式或使 http 调用异步的方式是什么？

Answer 1

Angular 甚至可以让你更好地控制它:)。这里可以选择两种方式:

<强>1。包装 $http

您可以通过使用 $http 包装器为每个请求编写内容，这将在发出请求之前和之后添加一些方法

app.factory('httpService',function($http){
    function beginRequest() {};
    function afterRequest() {};
    return {
        makeRequest: function(requestConfig){
             beginRequest();
             return $http(requestConfig).then(function(result){
                 afterRequest(result);
             });
        }
    }      
}) 

然后每次都可以调用这个函数来发出请求。这并不新鲜。

<强>2。使用拦截器

Angular 有更好的方法来处理所有请求。它使用名为“拦截器”的新概念。您将拦截器编写为普通服务，并将一个或多个拦截器推送到 $http 服务中，并根据拦截器的类型，每次请求发生时都会调用它。看这张图来思考拦截器:

拦截器的一些常见任务可以是:添加/删除加载图标，向您的http配置添加更多装饰器，例如 token key ，验证请求，验证响应的数据，恢复一些请求...

这是一个拦截器的示例，它将 token key 添加到请求的 header 中

app.service('APIInterceptor', function($rootScope, UserService) {
    var service = this;

    service.request = function(config) { 
        var currentUser = UserService.getCurrentUser(),
            access_token = currentUser ? currentUser.access_token : null;

        if (access_token) {
            config.headers.authorization = access_token;
        }
        return config;
    };

    service.responseError = function(response) {
        return response;
    };
})

然后将拦截器添加到您的 $http:

app.config(['$httpProvider', function($httpProvider) {  
    $httpProvider.interceptors.push('APIInterceptor');
}]);

现在所有请求都将在 header 中添加 token key 。很酷吧？

参见here欲了解更多信息: