DEV Community

loading...
Cover image for How to do multiple fetch requests in parallel using JavaScript?

How to do multiple fetch requests in parallel using JavaScript?

MELVIN GEORGE
Hi, I'm Melvin George, A web developer, and a blogger.
Originally published at melvingeorge.me ・3 min read

Originally posted here!

To do multiple fetch requests in parallel, we can use the all() method from the global Promise object in JavaScript.

TL;DR

// 3 fetch requests for 3 endpints
// and converting to JSON using the json() method
const fetchReq1 = fetch(
  `https://jsonplaceholder.typicode.com/todos/1`
).then((res) => res.json());

const fetchReq2 = fetch(
  `https://jsonplaceholder.typicode.com/todos/2`
).then((res) => res.json());

const fetchReq3 = fetch(
  `https://jsonplaceholder.typicode.com/todos/3`
).then((res) => res.json());

// do fetch requests in parallel
// using the Promise.all() method
const allData = Promise.all([fetchReq1, fetchReq2, fetchReq3]);

// attach then() handler to the allData Promise
allData.then((res) => console.log(res));

/*
OUTPUT
------

[
    {title: "delectus aut autem"},
    {title: "quis ut nam facilis et officia qui"},
    {title: "fugiat veniam minus"}
]
*/
Enter fullscreen mode Exit fullscreen mode

For example, let's say we have three endpoints like this,

  • https://jsonplaceholder.typicode.com/todos/1
  • https://jsonplaceholder.typicode.com/todos/2
  • https://jsonplaceholder.typicode.com/todos/3

in which we want to get the data but parallelly.

To do that first let's make three fetch requests for these threee endpoints like this,

// 3 fetch requests for 3 endpints
const fetchReq1 = fetch(`https://jsonplaceholder.typicode.com/todos/1`);
const fetchReq2 = fetch(`https://jsonplaceholder.typicode.com/todos/2`);
const fetchReq3 = fetch(`https://jsonplaceholder.typicode.com/todos/3`);
Enter fullscreen mode Exit fullscreen mode

Now we have defined our three fetch requests to get data from the three endpoints.

Now we need to convert the reponse of each fetch requests to JSON, for that we can attach a then() handler to each one of the fetch() requests and then convert the response data into JSON using the json() method and returning the json data like this,

// 3 fetch requests for 3 endpints
// and converting to JSON using the json() method
const fetchReq1 = fetch(
  `https://jsonplaceholder.typicode.com/todos/1`
).then((res) => res.json());

const fetchReq2 = fetch(
  `https://jsonplaceholder.typicode.com/todos/2`
).then((res) => res.json());

const fetchReq3 = fetch(
  `https://jsonplaceholder.typicode.com/todos/3`
).then((res) => res.json());
Enter fullscreen mode Exit fullscreen mode

Now to do the parallel requests, we can pass all the fetch requests as an array to the Promise.all() mehtod like this,

// 3 fetch requests for 3 endpints
// and converting to JSON using the json() method
const fetchReq1 = fetch(
  `https://jsonplaceholder.typicode.com/todos/1`
).then((res) => res.json());

const fetchReq2 = fetch(
  `https://jsonplaceholder.typicode.com/todos/2`
).then((res) => res.json());

const fetchReq3 = fetch(
  `https://jsonplaceholder.typicode.com/todos/3`
).then((res) => res.json());

// do fetch requests in parallel
// using the Promise.all() method
const allData = Promise.all([fetchReq1, fetchReq2, fetchReq3]);
Enter fullscreen mode Exit fullscreen mode
  • The Promise.all() method returns another Promise which can be resolved or rejected.

So let's attach a then() handler to the allData Promise like this,

// 3 fetch requests for 3 endpints
// and converting to JSON using the json() method
const fetchReq1 = fetch(
  `https://jsonplaceholder.typicode.com/todos/1`
).then((res) => res.json());

const fetchReq2 = fetch(
  `https://jsonplaceholder.typicode.com/todos/2`
).then((res) => res.json());

const fetchReq3 = fetch(
  `https://jsonplaceholder.typicode.com/todos/3`
).then((res) => res.json());

// do fetch requests in parallel
// using the Promise.all() method
const allData = Promise.all([fetchReq1, fetchReq2, fetchReq3]);

// attach then() handler to the allData Promise
allData.then((res) => console.log(res));

/*
OUTPUT
-----------

[
    {title: "delectus aut autem"},
    {title: "quis ut nam facilis et officia qui"},
    {title: "fugiat veniam minus"}
]
*/
Enter fullscreen mode Exit fullscreen mode
  • The res inside will contain an array of responses resolved from each of the fetch requests!

See the above code live in JSBin

Disclaimer: Promise.all doesn't run every task in parallel, it justs waits for all the promises you gave to get either fulfilled or rejected before moving on. Here is a super cool article discussing the Parallel feeling in Promise.all in-depth.

That's all! 😃

Feel free to share if you found this useful 😃.


Discussion (0)