Hi everyone,

I am here again, but this article will be different than others. I have had a chance to develop a React.js project for one of our client. I have usually been involved in Angular based projects. The client also wanted us to develop a React.js based project then we began to improve the project that the client needs with React.js.
First of all, we bought a lesson from udemy and continue to read official React.js website. The sources we choice helped us to improve easily the product. Although we are new to React.js, we developed the requirements of the project in a shorter time than expected. Before I continue, I just want to say that I am not an expert about React.js so I will just try to share some things that I used and experienced.

In this article, I will focus on sending multiple http requests with axios. I assume that you have some knowledge about axios. axios is a promise-based HTTP Client for node. js and the browser. It helps you to fetch data with http request and it’s also JavaScript library.

I just needed to send concurrent http request, then I found the method axios.all() which axios has. axios.all() helps you to send more than one concurrent http request. You can pass the series of returning value of axios.get() as a parameter to axios.all(). Then you can spread your response when all requests have done.

Let me show you how to do it. First of all, you need to define more than one axios.get() values. Then pass them to axios.all(). After response come you can also spread them with giving number of the array.

Example code blocks.

let reqOne = axios.get('https://api.github.com/repos/stedolan/jq/commits');
let reqTwo = axios.get('https://api.github.com/repos/coderkan/spring-boot-redis-cache/commits');

axios.all([reqOne, reqTwo]).then(axios.spread((…res) => {
 console.log(res[0]);
 console.log(res[1]);
 // you can also set your states.
 this.setState(
    {
        reqOneCount: res[0].data.length,
        reqTwoCount: res[1].data.length
    });
 }));

You can also follow axios website and github profile to learn more about information.

I hope you enjoy while reading.

Have a nice coding.