call multiple ajax call with Jquery deferred When and then(3 parallel calls and then on complete one more ajax call)

Question

My requirement is to call 3 ajax call in parallel then only on complete of the 3 calls , I am requesting one more Ajax call . So for i am able to achieve this by the following this article by Chris from CSS-trick

`$.when(
  $.get("url1"), //goes in parallel
  $.get("url2"), //goes in parallel
  $.get("url3") //goes in parallel
).then(
  $.get("url4") // fires only on completion of 3 calls above.
);`

But my code stuructre is like

`$.when(
   threeCalls(){
   //this gives 3 ajax calls from here
})
.then(
   singlecall(){
   //this shoould be only called after 3 calls been successfull
})`

This way it does not wait for the singlecall() to wait for the threecalls() method to finish and all calls(4 of them) goes in parallel/async .

How i should achieve this?

Answer 1

The example below shows how to use sequential calls with functions.

Rather than: when(singleCall()) , do it like when(singleCall) ; without parantheses. Or, it will execute the function before the promise resolves.

 // just open up the network tab in your browser and see that // first 3 urls will go in parallel in threeCalls, // and then the last url will go in singleCall function threeCalls() { console.log("calling urls in parallel..."); return [ $.get("http://jsonplaceholder.typicode.com/posts/1"), $.get("http://jsonplaceholder.typicode.com/posts/2"), $.get("http://jsonplaceholder.typicode.com/posts/3") ]; } function singleCall(results) { console.log("single call is here"); return $.get("http://jsonplaceholder.typicode.com/posts/4"); } $.when.apply($, threeCalls()) .done(singleCall) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

Answer 2

This will be more readable and functional (do not use parentheses on call4 in then)

var call1 = $.ajax({}),
    call2 = $.ajax({}),
    call3 = $.ajax({}),
    call4 = $.ajax({});

$.when( call1, call2, call3 )
 .then( call4 );