angularjs链顺序http发布

时间:2016-03-01 05:53:35

标签: angularjs angular-promise

在我的应用程序中,我将数据存储在本地存储中并在后台触发async http post。成功发布后,已发布的数据将从本地存储中删除。当http post正在进行中时,可能会有更多数据添加到本地存储中,因此我需要对帖子进行排队并按顺序处理它,因为我需要等待从成功的帖子中清除本地存储。应该递归调用该任务,直到本地存储中有数据为止。

taskQueue: function () {
    var deferred = $q.defer();
    queue.push(deferred);
    var promise = deferred.promise;

    if (!saveInProgress) {
      // get post data from storage
      var promises = queue.map(function(){$http.post(<post url>, <post data>).then(function(result){
          // clear successful data
          deferred.resolve(result);
      }, function(error){
         deferred.reject(error);
      })
    })

    return $q.all(promises);
}

作为有角度的新手,我遇到上述代码不顺序的问题。我怎样才能实现我想要的目标?队列长度未知,并且队列长度随着进程的进行而增加。如果这是重复的,请指出其他答案。

3 个答案:

答案 0 :(得分:2)

Async.js听起来不错,但如果你不想使用图书馆......

$ q.all将批处理一组请求并同时触发它们,并在数组中的所有承诺解析时解析 - 这不是你想要的。

从数组中进行$ http调用SEQUENTIALLY执行此操作....

var request0 = $http.get('/my/path0');
var request1 = $http.post('/my/path1', {data:'fred'});
var request2 = $http.get('/my/path2');
var requestArray = [];

然后......

requestArray.push(request0);
requestArray.push(request1);
requestArray.push(request2);

然后......

requestArray[0].then(function(response0) {
    // do something with response0
    return requestArray[1];
}).then(function(response1) {
    // do something with response1
    return requestArray[2];
}).then(function(response2) {
    // do something with response2
}).catch(function(failedResponse) {
    console.log("i will be displayed when a request fails (if ever)", failedResponse)
});

答案 1 :(得分:1)

实现这一目标的简便方法是使用Async.js。在那里你可以找到一个名为mapSeries的方法。您可以在队列上运行它,它将逐个顺序处理数组的所有元素,并且只有在调用正确的回调时才会继续到下一个元素。

答案 2 :(得分:1)

虽然拥有一个库解决方案会很棒(根据@ nstoitsev的回答),你可以在没有它的情况下做到这一点。

未知长度的连续请求

回顾一下:

  • 我们不知道请求数量
  • 每个回复可以排队另一个请求

一些假设:

  • 所有请求都将处理公共数据对象(在您的情况下为本地存储)
  • 所有请求都是承诺

运行队列

function postMyData (data){
    return $http.post(<url>, data)
}

var rqsts = []

function executeQueue (){

    if(!rqsts.length)
         //we're done
         return

    var rqst = rqsts.shift()        
    rqst()
    .then(function(rsp){
        //based on how you're determining if you need to do another request...  
        if(keepGoing)
            rqsts.push(postMyData(<more data>))           
    })
}

codepen - http://codepen.io/jusopi/pen/VaYRXR?editors=1010

我有意留下这个含糊不清的因为我不明白失败的条件是什么,如果你想改变请求使用多于$http.post调用的请求,你可以用某种方式将其传回去。

只是一个建议

  

有角度的新手...

许多事情正朝着整个功能性,被动编程范式发展。由于你对Angular已经相对了解,而NG2已经内置了一些,所以它可能值得你关注。我认为rxjs已经出现在许多NG2示例包中。