angularjs - AngularJS $http ajax 请求不是异步的并导致页面挂起

Question

我有一项服务，我从服务器中提取数据。当我单击按钮通过此服务向服务器发送请求时，窗口会冻结，直到我收到服务器的响应。我能做些什么来使这个请求异步吗？

这是我的服务。

app.factory('service', function($http) {
  return {
    getLogData : function(startTime,endTime){
      return $http({
        url:     baseURL + 'getLogData',
        method:  'GET',
        async:   true,
        cache:   false,
        headers: {'Accept': 'application/json', 'Pragma': 'no-cache'},
        params:  {'startTime': startTime , 'endTime': endTime}
      });
    }
  };
)};

HTML。

<button ng-click="getData()">Refresh</button>
<img src="pending.gif" ng-show="dataPending" />

代码

$scope.getData = function(){
  service.getLogData().success(function(data){
    //process data
  }).error(function(e){
    //show error message
  });
}

Answer 1

虽然关于您的方法的优缺点存在一些争论，但我认为问题在这里得到了解答：AJAX 调用会在浏览器获得响应并执行成功时冻结浏览器一段时间

要测试这是否确实是问题的一部分，请模拟响应并静态提供它。我使用 Fiddler 或 WireShark 来获取响应，然后保存到像 testService.json 这样的文件中。XHR 及其所有衍生产品（如 $HTTP $.ajax）将其视为服务，尽管标头可能略有不同。

Answer 2

使用成功承诺，并将日志数据包装在一组可以附加到 $scope 的对象中。

因此，与其让您的服务有一个阻塞方法，不如让它维护一个“LogEntries”列表。

   // constructor function
   var LogEntry = function() {
      /*...*/
   }

   var logEntries = [];

   // Non-blocking fetch log data
   var getLogData = function() {
        return $http({
            url : baseURL + 'getLogData',
            method : 'GET',
            async : true,
            cache : false,
            headers : { 'Accept' : 'application/json' , 'Pragma':'no-cache'},
            params : {'startTime' : startTime , 'endTime' : endTime}
        }).success(function(data) {;
           // for each log entry in data, populate logEntries
           // push(new LogEntry( stuff from data ))...
        };
   } 

然后在您的控制器中，注入您的服务并引用此服务的日志数据数组，以便 Angular 将监视它并正确更改视图

   $scope.logEntries = mySvc.logEntries;

然后在 HTML 中，简单地对 logEntries 做一些事情：

  <p ng-repeat="logEntry in logEntries">
    {{logEntry}}
  </p>

Answer 3

使用此代码进行配置

$httpProvider.useApplyAsync(true);

Answer 4

var url = //Your URL;

  var config = {
    async:true
  };

  var promise= $http.get(url, config);
     promise.then(
     function (result) 
     {
       return result.data;
     },
     function (error) 
     {
       return error;
     }
    );