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    
});

现在如果我想在onSend函数中的某个id上附加一个微调器，就像在jQuery中一样，并成功删除微调器，对于BeforeSend或使http调用异步，喜欢Angular的方式是什么样的？

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有更好的方法来处理所有请求。它使用名为＆＃39; interceptor＆＃39; 的新概念。您将拦截器编写为普通服务并将一个或多个拦截器推入$ http服务并依赖于拦截器的类型，每次请求发生时都会调用它。看看这张图片来考虑拦截器：

拦截器的一些常见任务可以是：添加/删除加载图标，在http配置中添加更多装饰器，如令牌密钥，验证请求，验证响应数据，恢复一些请求......

以下是将令牌密钥添加到请求标头中的拦截器示例

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'); }]);

现在所有请求都会在标头中添加一个令牌密钥。很酷吧？

有关详细信息，请参阅here：

Answer 2

这里有传达帮助解决您的问题：https://docs.angularjs.org/api/ng/service/$q http://chariotsolutions.com/blog/post/angularjs-corner-using-promises-q-handle-asynchronous-calls/

Answer 3

$ http函数默认为异步。

关于beforesend函数，你可以将http调用包装在一个函数中，并在调用之前添加微调器并在成功回调中删除它。像这样的东西，

var makeHttpRequest = function(){
   $('#someID').addClass('spinner');
   $http(req).then(function(){
     $('#someID').removeClass('spinner');
     //rest processing for success callback
   },function(){
     $('#someID').removeClass('spinner');
     //Error callback
   });
}

Answer 4

我在角度应用程序中实现复杂get和post的方式如下：

创建CRUDService，如下所示：

yourApp.service('CRUDService', function ($q, $http) {
    this.post = function (value, uri) {
        var request = $http({
            method: "post",
            url: uri,
            data: value
        });
        return request;
    }

    this.get = function (uri) {
        var request = $http({
            method: "get",
            url: uri
        });
        return request;
    }
});

正如您所看到的，此服务只返回一个get / post对象。在我的控制器的某处，我使用以下服务：

$('#exampleButton').button("loading");  //set the element in loading/spinning state here
var getObj = CRUDService.get("/api/get/something");
getObj.then(function(data){
    //do something
    $('#exampleButton').button("reset"); //reset element here
}, function(err){
    //handle error
    $('#exampleButton').button("loading"); //reset element here
});

$('#exampleButton').button("loading");  //set the element in loading/spinning state here
var postObj = CRUDService.post(postData,"/api/get/something");
postObj.then(function(data){
    //do something
    $('#exampleButton').button("reset"); //reset element here
}, function(err){
    //handle error
    $('#exampleButton').button("loading"); //reset element here
});

我希望这会有所帮助：）

Answer 5

http调用是异步的 - 它会返回promise，您可以使用try()和catch()方法处理这些调用。你可以简单地包裹你的电话，即

function makeRequest() {
  $scope.showSpinner = true;
  $http
    .get('http://www.example.com')
    .then(function (response) {
      $scope.showSpinner = false;
    })
    .catch(function (err) {
      $scope.showSpinner = false;
    });
}

如果您希望使用类似于jQuery的熟悉语法，那么您可以推送自己的自定义拦截器。这将允许您拦截请求和响应并执行您想要的任何操作。在下面的例子中，如果定义了函数，我们就会调用它们。

angular
  .module('app', [])
  .config(appConfig)
  .factory('HttpInterceptors', httpInterceptors)
  .controller('MyController', myController);

// app config
appConfig.$inject = ['$httpProvider'];

function appConfig($httpProvider) {
  // add out interceptors to the http provider
  $httpProvider.interceptors.push('HttpInterceptors');
}

// http interceptor definition
function httpInterceptors() {
  return {
    request: function(request) {
      if (angular.isFunction(request.beforeSend)) {
        request.beforeSend(); 
      }
      return request;
    },
    response: function(response) {
      if (angular.isFunction(response.config.onComplete)) {
        response.config.onComplete(); 
      }
      return response; 
    }
  }
}

// controlller
myController.$inject = ['$scope', '$http', '$timeout'];

function myController($scope, $http, $timeout) {

  $scope.showSpinner = false;
  
  $http({
    method: 'GET',
    url: 'https://raw.githubusercontent.com/dart-lang/test/master/LICENSE',
    beforeSend: function() {
      $scope.showSpinner = true;
    },
    onComplete: function() {
      $timeout(function() {
        console.log('done');
        $scope.showSpinner = false;
      }, 1000);
    }})
    .then(function(response) {
      console.log('success');
    })
    .catch(function(err) {
      console.error('fail');
    });
}

.spinner {
 background-color: red; 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>

<div ng-app='app' ng-controller='MyController'>
  <div ng-class='{spinner: showSpinner}'>
    Hello World!
  </div>
</div>

AngularJS http调用（完整语法）

5 个答案: