How to send multiple requests using axios?

Let us begin with a simple operation and submit one request using Axios. First, we import axios and specify the API/URL from which we want to load data.

import axios from 'axios';

let one = "https://api.abc.com/ex"

Following that, we specify that we wish to make a GET request to the above URL using axios.

const requestOne = axios.get(one);

We now have an unresolved promise in requestOne that we can utilise to finally perform the GET request and receive the response.

requestOne.then(response => {
  console.log(response)
}).catch(error => {
  console.err(error)
})

Because axios delivers a Promise, we can use Promise.all to handle numerous requests. all, fortunately, axios comes with a function named all, so let us use that instead and add two more requests.

Again, we provide the URLs we wish to access.

import axios from 'axios';

let endpoints =  [  
    'https://api.github.com/users/ejirocodes',
    'https://api.github.com/users/ejirocodes/repos', 
    'https://api.github.com/users/ejirocodes/followers',  
    'https://api.github.com/users/ejirocodes/following'  ];

   axios.all(endpoints.map((endpoint)  => axios.get(endpoint)))
   .then( axios.spread((
   {data: user},  
   {data:repos},  
   {data:followers},  
   {data:following})  =>  
   { console.log({ user, repos, followers, following });  })  );

Promise.all vs. axios.all

The Promise.all method returns a promise that resolves when all of the promises in the iterable argument resolve.

Now, let’s see this in action:

let endpoints =  [  
      'https://api.github.com/users/ejirocodes',
      'https://api.github.com/users/ejirocodes/repos',  
      'https://api.github.com/users/ejirocodes/followers', 
      'https://api.github.com/users/ejirocodes/following'  ]; 

    // Return our response in the allData variable as an array 
     Promise.all(endpoints.map((endpoint)  => 
     axios.get(endpoint)))
     .then( axios.spread((...allData)  =>  
     { console.log({ allData });  })  );

Concurrent API requests in React with Promise.all and Axios

To make simultaneous API requests in a React app using Axios and Promise, we must use React Hooks.

In this example, we will get both the followers and following data of a GitHub profile. The idea is that, if for some reason, the API request for the followers data for the user’s GitHub profile is unsuccessful, we can’t get the response for the followers data for the user’s GitHub profile.

This means the request for the user’s GitHub user profile follwing count will also fail.

This is because when we make concurrent requests, the response from one request depends on the other. So, essentially, we want both or all requests to fail if at least one fails.

Using Promise.all and ES6 destructuring, let’s write a function that will perform multiple GET requests concurrently in our React app:

// In our component, we have to save both 
//data in our state using the useState hook  const 
 [followers, setFollowers]  = useState([])  
 const  [followings, setFollowing]  = useState([])  
 const getGithubData =  ()  =>  {  let endpoints =  [  
  'https://api.github.com/users/ejirocodes',  
  'https://api.github.com/users/ejirocodes/repos', 
  'https://api.github.com/users/ejirocodes/followers', 
  'https://api.github.com/users/ejirocodes/following'  ];  
   Promise.all(endpoints.map((endpoint)  => 
   axios
   .get(endpoint)))
   .then(([
   {data: user},  
   {data: repos}, 
    {data: followers},  
    {data: followings}]  )
    =>  { setFollowers(followers) setFollowing(followings)  });  }

Next, let’s call the function when the page loads. To achieve this the React way, we’ll use theuseEffect Hook:

// remember to import useEffect from react 
useEffect(()  =>  { 
    getGithubData();  
},  []);

Then, render both the followers and following data we just received from the various endpoints to the DOM:

// Wherever your return statement is in your React app

<section  style={{ display:  "flex" }}>

    <section>

        <h2>Followers</h2>

        {followers.length > 0 && (

        <div>

            {followers.map((follower) => (

            <div  key={follower.id}>

            <img  src={follower.avatar_url}  alt={follower.html_url}  />

            <p>GitHub Profile: {follower.html_url}</p>

        </div>

        ))}

        </div>

        )}

        </section>

        <section>

            <h2>Following</h2>

            {followings.length > 0 && (

            <div>

                {followings.map((following) => (

                <div  key={following.id}>

                    <img  src={following.avatar_url} 
                     alt={following.html_url}  />

                    <p>GitHub Profile: {following.html_url}</p>

                </div>

                ))}

            </div>

            )}

    </section>

</section>

Source: https://blog.logrocket.com/using-axios-all-make-concurrent-requests/

https://www.storyblok.com/tp/how-to-send-multiple-requests-using-axios