多个jQuery承诺按顺序排列

时间:2015-09-26 01:00:39

标签: javascript jquery promise jquery-deferred

基本上我想要这个:

function do_ajax_calls(...){
  var d = $.Deferred();

  $.ajax(args).done(function(){

    $.ajax(args).done(function(){

      $.ajax(args).done(function(){
         d.resolve();
      });

    });

  })

  return d.promise();
}

但是ajax调用的数量取决于我传递给函数的参数,这是一个数组,因此我无法使用该代码。

该函数应返回仅在最后一次ajax调用完成时解析的promise。所以函数需要像这样调用:

 do_ajax_calls(....).done(function(){
   // here is the callback
 })

有谁知道我该怎么做?

4 个答案:

答案 0 :(得分:3)

  

但是ajax调用的数量取决于我传递给函数的参数,这是一个数组

如果是每个数组项的一个ajax调用

function do_ajax_calls(args) {
    return args.reduce(function(promise, item) {
        return promise.then(function() { 
            return $.ajax(args); // should that be item?
        });
    }, Promise.resolve(true));
}

Promise.resolve(true)是一个“原生”承诺,即在IE中不可用,但我确信jQuery具有等价的

这是一个JSFiddle演示

答案 1 :(得分:2)

承诺的原因之一是因为它们可以被链接。你可以利用这个优势迭代地将其他请求链接到前一个请求的分辨率上:

function do_ajax_calls() {
    var dfd = $.Deferred();
    var promise = dfd.promise();
    var responses = [];

    function chainRequest(url) {
        promise = promise.then(function (response) {
            responses.push(response);
            return $.ajax(url, { method: 'POST' });
        });
    }

    for (var i = 0, length = arguments.length; i < length; i++) {
        chainRequest(arguments[i]);
    }

    dfd.resolve();

    return promise.then(function (response) {
        return responses.slice(1).concat(response);
    });
}

上面的代码将返回一个最终解析为所有响应数组的promise。如果任何一个请求失败,则承诺将在第一次失败时拒绝。

JSFiddle

答案 2 :(得分:1)

这是Demo

var counter = 1 ;

function multipleAjax(loop)
{
   if(counter<loop)
   {
        $.ajax(
        {
            url: 'http://mouadhhsoumi.tk/echo.php',
            success:function(data)
            {
                multipleAjax(loop);
                $(".yo").append(data+"</br>");
                counter++;
            }
        });

   }
}
multipleAjax(5);

答案 3 :(得分:0)

尝试使用$.when()Function.prototype.apply()$.map()

function do_ajax_calls(args) {
  return $.when.apply($, $.map(args, function(request, i) {
    return $.ajax(request) // `request` : item with `args` array
  }))
}

do_ajax_calls
.then(function success() {
  console.log(arguments)
}, function err() {
  console.log("err", arguments)
});