In this tutorial, you will learn how to receive multiple API requests in one function using Axios😃. We will be using two NBA APIs. one API gets the image of a player, the other gets the name.
Setup:
- Create a new folder and call it Multiple_Requests
- Within the Multiple_Requests folder create a new react app using npx create-react-app multiplerequests
- Once the app is installed, within the master directory of the app, install and Axios, by doing npm axios. Inside of your src/index.js file
4. We will work within the src/App.js file so go ahead and open it up. Startup the app using npm start
5. Go ahead and clear all the information within the App.js file and make it look like the one below
6. Now we will import axios, useState, and useEffect from React
7. Now we will create two useState variables inside of our app variable, one will be used for getting a players image and a players name
8. Now we will create a function called fetchData and create two variables one for the player image and the other for the name. Then we will create two different get requests and refer them to new variables
9. Now we will use axios.all in and put getNBAPlayer and getPlayerPic in an array and using axios spread we will create a variable called allData that will contain all of our API request data. we can use array indexing to target our API requests
10. Now we will setPlayerName to allDataPlayer and setPlayerPic to getNBAPlayerPic. We will now create a useEffect function and run our fetchData function within it
11. We will now render our playerName and player pic within our return
Final Code:
You have now learned how to render multiple API requests using React and Axios. Hope it helped!
Arslan,
Kematix Digital
