How to do multiple fetch requests in parallel using JavaScript?
Tags: javascript
Published: 2021-05-03 00:00:00

---
  title: How to do multiple fetch requests in parallel using JavaScript?
  published: true
  tags: JavaScript
  date: Mon May 03 2021 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/do-multiple-fetch-requests-parallel-javascript
  cover_image: https://melvingeorge.me/_next/static/images/main-1b76f2a97d0a78f17207623bb1a726e1.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/do-multiple-fetch-requests-parallel-javascript)
  
To do multiple fetch requests in parallel, we can use the `all()` method from the global `Promise` object in JavaScript.

### TL;DR

```js
// 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,

```js
// 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,

```js
// 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,

```js
// 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,

```js
// 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](https://jsbin.com/rexarerexu/4/edit?js,console)

### 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](https://anotherdev.xyz/promise-all-runs-in-parallel/#:~:text=all%20doesn't%20guarantee%20you,are%20done%20with%20their%20job) in-depth.

That's all! 😃

### Feel free to share if you found this useful 😃.

---