How to do multiple fetch requests in parallel using JavaScript?

Published May 3, 2021

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"}
]
*/

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

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

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

• 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"}
]
*/

• 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 😃.