SumanP89 SumanP89 - 3 months ago 16
Javascript Question

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

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

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>