角同步HTTP循环更新进度条 [英] Angular synchronous http loop to update progress bar

问题描述

我试图更新一个foreach内顺序http请求的进度条，这工作，但它并不完整，进度条正在由HTTP调用同步时间上同步进行的，我究竟做错了什么？

I'm trying to update a progress bar with a sequential http request inside a foreach, this works, but it's not synchronous by on complete, progress bar is being sync'd by the http call, what am I doing wrong?

angular.forEach(queue, function (item) {
    if (item.uid) {
        d.item = item;
        $http({
            url: BASE_URL + 'upp', 
            method: 'post',
            data: d                  
        }).then(function(res){
            x++;
            update_progress((x/queue_count)*100);
        });
    }
});

我想调用update_progress函数只是当HTTP返回为完成（200 OK），所以进度条显示正确的实际进展。谢谢！

I would like to call the update_progress function just when the http returns as finished (200 OK), so the progress bar shows the actual progress correctly. Thanks!

修改

我试过检查响应状态，调用* update_progress *函数之前，它仍然没有按预期工作。我不知道在完成请求之前的200分派：|在HTTP请求的逻辑，在资源 OBJ不应该是的响应的？我的意思是，如果是200，而不是一个错误code，这并不意味着该请求已完成？

I tried checking the response status, before calling the *update_progress* function and it still does not work as expected. I wasn't aware that 200 was dispatched before the request is completed :| By logic, the res obj shouldn't be the response of the http request? I mean, if it's 200 and not an error code, that shouldn't mean that the request was completed?

angular.forEach(queue, function (item) {
if (item.uid) {
    d.item = item;
    $http({
        url: BASE_URL + 'upp', 
        method: 'post',
        data: d                  
    }).then(function(res){
        if(res.status == 200) {
          x++;
          update_progress((x/queue_count)*100);
        }
    });
}

阅读更多承诺ATM，看看我能使其工作按规定@乔希怪

Reading more on promises atm to see if I can make it work as stated by @josh-strange

编辑2

所以承诺是做到这一点，所有的请求都按顺序发送所以进度条按预期工作，这里的code：

So promises was the way to do it, all requests are sent sequentially so the progress bar works as expected, here's the code:

var promise = $q.all({}); 
// Had to init $q.all with an empty obj, 'cause null was trowing errors

angular.forEach(queue, function(item){
  if (item.uid) {        
    promise = promise.then(function(){
      d.item = item;
      return $http({
        url: BASE_URL + 'upp', 
        method: 'post',
        data: d 
      }).then(function(res){
        x++;
        update_progress((x/queue_count)*100);
      });
    });
  }
});

promise.then(function(){
  end_js_update();
});

感谢@乔希怪

推荐答案

下面是一个工作 Plunker 连续的http请求的工作的例子。你可以明显处于服务非常漂亮的包装这件事，但你的目的，我只是把它的一个简单的例子在控制器中。

Here is a working Plunker of a working example of sequential http requests. You could obviously package this up very nicely in a service but for your purposes I just put a simple example of it in a controller.

下面是在code的肉：

Here is the "meat" of the code:

var app = angular.module('testApp',[]);

app.controller('myController', function($scope, $http, $q){

  $scope.responses = [];
  $scope.doneLoading = false;
  var urls = [
    'http://httpbin.org/ip',
    'http://httpbin.org/user-agent',
    'http://httpbin.org/headers'
  ];

  var promise = $q.all(null);

  angular.forEach(urls, function(url){
    promise = promise.then(function(){
      return $http({
        method: 'GET', 
        url:url 
      }).then(function(res){
        $scope.responses.push(res.data);
      });
    });
  });

  promise.then(function(){
    //This is run after all of your HTTP requests are done
    $scope.doneLoading = true;
  })

});

编辑：迈克·P的下面写着：这是链接的承诺请参见 $ Q文档的一个例子。

这篇关于角同步HTTP循环更新进度条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！