How to Send multiple HTTP Requests at the Same Time? (Axios all)

4 min readJun 8, 2022

It can happen that you are working on a big scale project and you need to send plenty of HTTP requests at the same time. What is the best way to do it? Check it out.

Maybe it has already happened to you or maybe not yet but this can come at any moment. The first time that I heard about Axios all was during a job interview for getting my very first dev job. And you know what? I had no idea what that was and how I could use it.

Being curious is very important in our sphere and especially for a junior. So, what I did, is that I searched by myself about its functionality, and right now, I am even using it in my projects.

So let’s take a look at Axios all and see why should we use it.

✅ Why use it?

Well, the question that I got during my interview was: “How could I send multiple requests at the same time?”. The answer was Axios all (if you are using Axios) or Promise all (for all the rest).

Imagine that you are in this situation when you have a page of the user's profile and for each section of it, you need to call a separate GET request.

It could become really messy writing more than 5 requests and repeating the same code.

axios.get('www.someapi.com')   
.then(function (response) {     
   console.log(response)});

Some of the GET requests would need to have the parameters and the others not. Copy pasting this code 5 times won’t be the best solution.

In this case, we can use an Axios all function that will regroup all our calls together and send them at the same time.

✅ Axios all

As it has already been said above, Promise all and Axios all have the same functionality, the only difference is about what YOU want to use.

However, in this article, we will speak about the modern way of it and use Axios all since it is something that you can see on any project nowadays.

Assign all the calls

The first thing to do will be to assign all the calls to a variable, to make the code more readable.

let urlInfo = ('www.website.com/client/info' + client.id);
let urlPurchases = ('www.website.com/purchase' + client.id);
let urlContacts = ('www.website.com/contacts');
let urlAds = ('www.ads.com/ads');

As you can see, we have four different calls to do and all of them have been assigned to a different variable.

Of course, some of them could have different additional parameters or filters depending on what kind of information you are willing to display.

Send the requests

The second step would be to actually call all of the variables that we have just created and to use them within the Axios all array.

axios.all([
  axios.get(urlInfo),
  axios.get(urlPurchases),
  axios.get(urlContacts),
  axios.get(urlAds),
])

Our requests have been sent! 😊

Get the answer

Now, like any time when you need to use a GET request, you would want to get its answer and use it for some of your purposes.

.then(axios.spread((Info, Purchase, Contacts, Ads) => {
   console.log(Info)
   someFunction(Purchase)
   console.log(Contacts)
   console.log(Ads)
}));

To be able to get all the answers that you want, you should use Axios spread.

Please note, that the order is very important here. That means that the first request that you are sending will correspond to the first argument that you are using in the Axios spread function.

For example, Info is the “response” of the urlInfo GET request.

As soon as the response is successful, you can treat the given information as you want.

Final code

let urlInfo = ('www.website.com/client/info' + client.id);
let urlPurchases = ('www.website.com/purchase' + client.id);
let urlContacts = ('www.website.com/contacts');
let urlAds = ('www.ads.com/ads');axios.all([
  axios.get(urlInfo),
  axios.get(urlPurchases),
  axios.get(urlContacts),
  axios.get(urlAds),
])
.then(axios.spread((Info, Purchase, Contacts, Ads) => {
   console.log(Info)
   someFunction(Purchase)
   console.log(Contacts)
   console.log(Ads)
}));

✅ Cons

Even if it seems clean and very well organized, there could exist some disadvantages to using this function.

It can slow the process since you are using multiple requests in the same time. In this case, it is important to use a loader on the page.

✅ Conclusion

It has been already several times that I have used this function and I think it is something important at least to know, and probably even to use (if you need to). However, if you have just 2 or 3 requests, it is still better to use a classic way.

Thank you! 🤩