Parallel AJAX request without jQuery

Question

I am trying to fetch multiple parallel request with single callback, just like jQuery "when"

$.when(ajax1, ajax2).done(callback)

I don't want to call the second ajax call after ajax1 is completed, I want ajax2 and ajax2 to be requested same time and than the callback when both are completed.

I'm looking for plain javascript instead of jQuery for such implementation.

score 1 · Accepted Answer · answered May 17 '19 at 12:22

Use a method to make the request that will return a promise.

This could be simply using the fetch api or wrapping XMLHttpRequest with a promise.

Put the two promises in an array and pass it to Promise.all.

Promise.all([ fetch("http://example.com"), fetch("http://example.net") ])
    .then(array => console.log(array));

score 0 · Answer 2 · answered May 17 '19 at 12:50

You can also use async/ await with Promise.all to achieve that:

async function getAll() {
  // waits untill all resposnes are resolved
  const data = await Promise.all([
    fetch('https://jsonplaceholder.typicode.com/todos/1').then(response =>
      response.json()
    ),
    fetch('https://jsonplaceholder.typicode.com/todos/2').then(response =>
      response.json()
    ),
  ]);
  // returns array of resolved data from fetch
  console.log(data);
}

getAll()

score -2 · Answer 3 · answered May 17 '19 at 13:06

-2

You can replace done to then Method

$.when( ajax1 , ajax2 ).then(function() {
    // success ajax1, success ajax 2
});

answered May 17 '19 at 13:06

Vishal Prajapati

35
6

This will throw an error because `$` isn't defined. The question very clearly was asking for a solution which does not use jQuery. – Quentin May 17 '19 at 14:41
Sorry, I'm not using jQuery. – MZH May 17 '19 at 18:23

Parallel AJAX request without jQuery

3 Answers3