Send multiple requests for data with axios.all( )

Image for post
Image for post

Axios is a library used in React projects that allow us to request data from external resources. In many cases, developers would use this in order to retrieve data from API’s (Application Program Interface). This is something I had to get familiar with as I had to implement it immediately for the next project.

Currently, I’m in my 8th & second-last week here at Juno College’s web development boot camp. What a journey its been. All these emotions of anger and frustration, then absolute joy, and back to sadness — all from this week, after completing my first React project. In said project, I decided to use an API.

After I installed axios in my terminal, and set up my project. I analyzed the documentation, then I found the required parameter keys and main endpoint that I wanted to use and was able to console.log the data into my project. After completing the project and using ALL the data from that endpoint, I couldn’t help but feel like I could’ve utilized more of that API if I was able to figure out how to get multiple endpoints and manipulate that data in my project.

But after some heavy researching (googled: “how to get multiple endpoints from API”) I managed to find the “axios.all()” method. “This method returns a single promise object that resolves only when all arguements passed as an array have resolved.” — An article from a developer writes. In other words, instead of creating multiple axios requests and returning several objects (promises), you can create one axios request to retrieve all of the data you desire.

Here’s how I used it:

Image for post
Image for post
Using axios.all method to grab data from 4 endpoints off of the same API

This “getApiData” function which is called in my componentDidMount( ) contains the axios request. Inside the function, I have set several end points (You can also use different URLs) of the API in variables and passed them as a parameter inside the axios.all. Notice that within the smooth brackets ( ), the parameters I passed are enclosed in an array [ ].

Following is the “.then( )” method which, from here we are able to manipulate this data. The only difference in the “.then( )” method from your typical axios call is that we spread the array using “axios.spread( )” and within it we use the spread “(… responses)” method to separate the information from the array it was original contained in.

Next, we take each of those objects and declare them into individual variables and pass them in as properties of the state. We can do this by using “this.setState({})” and setting the originally empty array properties to contain the individual data. Now that I passed in the data from the several endpoints of the API into state, I am able to manipulate it however I desire because that data is now set in my project.

If I didn’t learn about this method. I probably would have made multiple requests (which is fine! but i wanted less code), or worse — I would’ve just stuck with that one endpoint. By using axios.all( ) it allowed me to restructure my project and design it with more information in the palm of my hands. So I hope this helped you, as much as it did for me.

Written by

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store