CODEWITHSUNDEEP
javascriptjquerypromisejquery-deferred
Anna K.
Anna K.

Reputation: 1995

Multiple jQuery promises in sequential order

Basically I want this:

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

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

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

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

    });

  })

  return d.promise();
}

But the number of ajax calls depends on the arguments that I pass to the function, which is an array, so I can't use that code.

The function should return a promise that only resolves when the last ajax calls completes. So the function needs to be called like this:

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

Does anyone know how can I do this?

Upvotes: 4

Views: 1977

Answers (4)

Jaromanda X
Jaromanda X

Reputation: 1

But the number of ajax calls depends on the arguments that I pass to the function, which is an array

If it's one ajax call per array item

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

The Promise.resolve(true) is a "native" promise, i.e. not available in IE, but I'm sure jQuery has an equivalent

Here's a JSFiddle Demo

Upvotes: 4

guest271314
guest271314

Reputation: 1

Try using $.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)
});

Upvotes: 0

Ken Franqueiro
Ken Franqueiro

Reputation: 10559

One of the reasons promises are a big deal is because they can be chained. You can use this to your advantage to iteratively chain additional requests onto the resolution of the previous one:

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

The above code will return a promise ultimately resolving to an array of all of the responses. If any one of the requests fails, the promise will reject with the first failure.

JSFiddle

Upvotes: 2

Diptox
Diptox

Reputation: 1809

Here is it 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);

Upvotes: 1

Related Questions