Almost any production web application is going to make an API call (usually several), whether to interact with data on an external system or on a backend server. APIs (application programming interface) allow two systems to communicate with each other. This could involve simply making a GET request to retrieve some data, or making a request to update or delete some data on the backend.
It is expected that a professional React developer (or any web developer for that matter) will know how to consume an API. I think it’s a great thing to learn because you can create some cool applications that you wouldn’t have been able to otherwise by leveraging an API.
In this blog post, I am going to cover three ways for making API calls with React, Fetch API, Axios and XMLHttpRequest.
If at any time you would like to see the final source code, you can find it here.
Using React With Fetch API
Fetch API is a mechanism built into JavaScript that allows API calls to be made to a web server.
We can use it by calling the fetch() method:
In JavaScript, we could just do this, but in React, we have to be a bit more meticulous.
One of the ways we can make API calls in React is with the useEffect hook:
What I’m basically doing here is making a GET request, passing some header information, and storing the response in a state variable called data.
To test this yourself, you can clone the repo I listed above. However, you will need your own API/API key. I used Rapid API for this example. They have a collection of APIs that are free to use for developers that you can find here. You should be able to subscribe to any of the APIs through that link, but to get an API key for the exact one I used, check out IMDb.
With the above code, we can check the state of our MovieList component and see that we were able to successfully retrieve a list of title IDs:
Using React With Axios
Unlike Fetch API, Axios is not built into the JavaScript language so we will need to install the package:
And import it:
And then we can use Axios inside useEffect instead of Fetch API:
Other than replacing the fetch() method, the code is almost identical except we’re accessing the data property on the res (response) object.
Consuming a REST API
Making API calls in the useEffect hook is great, but you may be wondering what it would look like in a real world application. In a project I worked on recently, I consumed a REST API with Axios. I thought that this post would be a great opportunity to walk through that.
This isn’t to say that you won’t ever make an API call in useEffect. That will be something you’ll have to decide on a case-by-case basis.
At the top, we import Axios and define a base URL for our API.
We then define methods that correspond to each of the REST endpoints we need to consume. This is similar to how we used Axios earlier, however we have one method where we are sending a POST request. In that case, we need to pass some data along with our URL.
We could then use Redux Toolkit to update our state when any of the API calls are made. If you don’t know how to use Redux with React, check out my blog post where I cover that. Or if you want to see the full project where I did this, you can find it here.
Using React With XMLHttpRequest
The third and final way to make API calls in React is with XMLHttpRequest:
I won’t talk too much about this one because apparently Axios uses XMLHttpRequest under the hood. It is preferred to just use Axios because otherwise you would be be spending time implementing that functionality yourself.
Fetch API vs. Axios
With there being three ways to call APIs in React, you may be wondering which is the preferred way.
Like I said, Axios uses XMLHttpRequest under the hood, so this will be between Fetch API and Axios.
I did some research and it looks like Axios seems to be favored by the majority, but some argue that Fetch API is better.
- Axios
- has extensive browser support, can run smoothly on Internet Explorer 11
- allows ability to configure an “interceptor” which will add an API key to all request parameters
- complex authentication processes are much easier to manage
- without interceptors, handling failed authentication becomes problematic in larger applications
- offers ability to monitor request progress
- can cancel a request
- ability to make multiple requests simultaneously
- Fetch API
- built into the JavaScript language, doesn’t require an external dependency
- can only support Chrome 42+, Firefox 39+, Edge 14+, and Safari 10.1+
- treats 500 error codes from the server the same as a a 200 response
This list may be a bit biased towards Axios, but the general consensus is that either will work, it’s mostly dependent on preference. Some say that Axios isn’t really that great and that most people use it because that is what they’re comfortable with. It’s interesting to see both sides.
Public APIs Free for Developers
-
- Rapid API – This is the resource we used in our example. They have plenty of other free APIs, check them out with the link.
- JSON Placeholder – This is a service that provides free fake APIs for testing and prototyping. It is popular amongst developers.
- The Pokémon API – As someone who grew up with the Pokémon TV show, Game Boy Color games and cards, I was happy to stumble upon this. It looks like you could create your own Pokédex or simple game.
Conclusion
Hopefully this post has given you a decent understand of how to make API calls in React. You can either write your own backend with something like Node/Express or you can call some external API like the one we used.
Have an idea for a future blog post? Feel free to reach out to be via the contact page and I’ll be happy to address it! Or just reach out and let me know your thoughts!
Sources
Photo is licensed under CC BY-NC 4.0. The colors of the photo were altered.