Knock, knock…Axios who?
So you have a perfectly wonderful React app with elegant code and snappy styling to display whatever it is that you want to your users. But what is it that you want to display? For most developers, at least some of the information displayed on their app must be requested from some outside API.
But it is NOT the job of the React library itself to make an API request; indeed, as a library, React is really only about showing content (HTML) to users and handling user interaction. The job of making a network request falls to some separate piece of code inside our app. There are a few options for this, but let’s look at the two most common software libraries used.
Fetch
The first and more basic option is to use fetch. There is no need to install anything in this case, as fetch is a function built in to modern browsers. This option is a perfectly acceptable one, though it is basic and will require you to write quite a bit of code.
Axios
The second option is Axios, a third party software that you can install into your React app via npm.
To use it, you simply have to import it into your app, within the component that will be making the network request.
I created a small React app consisting of a Search Bar that takes in user input and uses that input to search through the Unsplash API for specific images. Let’s say we search for the keyword “fish” using our Search Bar. So we would need our app to take that user input and SEND A QUERY INCLUDING THAT INPUT to the Unsplash API, search its database for images that satisfy that query and then RETURN the results.
In our example app, the function that is responsible for taking the user input to make the network request is the onSearchSubmit function (on line 8).
Within this function, you will see some boilerplate code that is required of Axios requests. axios.gets() is the function that makes the network request and takes two arguments:
- The address to which we want to make the GET request
- An object that allows us to customize our request, as a number of different options can be included in it.
What I’ve included in the above code is the params key and the headers key as part of the second argument object. Within the params key, I’ve included an object that uses the user input (term) as a value for the query parameter. This is essentially a more elegant way of querying an API instead of including the query parameter in the address of the network request. The headers key involves things like client ID’s or API keys that authorize an app to query an API in the first place.
Finally, whenever we make a network request with either Fetch or Axios, an object called a promise is returned, which essentially gives us a notification when some work, like that network request, is completed. In order to get notified of when that request is completed, we use the .then() function, which is chained on to the Axios request. We pass the .then() function an arrow function, which will be called at some point in the future. This will be a callback that will be invoked with whatever data we got back from whatever API we queried. You can always use a .then() statement when working with a promise, no matter what option you are using to return that promise.
That being said, chaining .then() can sometimes look messy. So there is an alternate method that works with Axios. And this is why many developers prefer Axios over Fetch.
If you take a look at line 8, you see we can use the async keyword in front of our onSearchSubmit function that is responsible for making our network request. We can save our response in a variable called response, but we MUST also include the await keyword in front of our axios.gets() method.
One very important thing to remember with this syntax, though: pay attention to how you write your methods! The code above, while it looks very pretty, will give this error:
This is essentially the same problem that I addressed in my article extolling the virtues of arrow functions. And we can solve it using the strategies in that article.
We can use a callback function and pass in whatever variable is being used for the search term:
OR we can turn our onSearchSubmit function into an arrow function…in that case, however, we will have to change the syntax slightly.
Finally, a neat thing about Axios is that you can use the .create() method to create an instance of the Axios class with some default properties! Essentially, you can create a customized copy of an Axios request.
To do this, you can create an api folder and a file within that folder to contain your custom Axios request:
And then within that apicall file, you use the .create() method with whatever parameters you’d like to include:
In your App component, therefore, you no longer need to import axios, but rather the file with your custom Axios request.
Very important to note, as well, is that if you use a custom method…you no longer use the syntax axios.get() but rather file-name-with-your-custom-method.get().
Now, if we hook up a component to display image results and enter “fish” into our Search Bar, here is what we get:
Success!