Axios
Last updated
Was this helpful?
Last updated
Was this helpful?
Describe the purpose of using an API on the backend.
Create an application that uses an API and the axios
module.
In order to get around issues such as and API access control, we can communicate with other servers through our server. In this case, our server acts as both a client and a server. We'll be doing some requests using the axios
Node module.
To use the module, install it using npm.
Here's an example from NPM's homepage for the axios
module. Let's take a look at it.
Identify what's necessary for making a server-side request.
axios module import
axios.get function
URL
any other data or headers that need to be passed (optional)
then
promise (the code that runs once the request finishes)
handle a success
catch any raised exceptions or errors (optional)
run something at the end regardless (optional)
axios
into ExpressIn order to incorporate the axios
module into Express, we can set up a basic Express application and place the request code inside a route.
This can be done by creating a new directory, running npm init
, then installing the correct dependencies (refer back to the notes if you forgot). Here's an example app.
server.js
Take a look inside the object you get back. You'll see that the html comes back inside the data
field of the object. Like fetch
, axios
also has a wrapper it gives us in the response. So let's modify our console.log to get back just the data we're looking for, and change it to a res.send
so we see it in the browser:
Let's use a more useful source of data that we can parse, like OMDB (Open Movie Database)
server.js
API Keys
Notice that OMDB API has a key requirement for their API. That's okay, it just means we'll need to register for a key real quick before running the example. Don't worry - it's free and only takes a few minutes. Lots of APIs will require keys, so let's get into the habit!
Protip: Never share your API keys! These should go in
.env
files and never, ever be pushed up to Github or anywhere else online. The.env
file can be added to your.gitignore
file to make git ignore it!
Things to Note
It's very important to call res.send
in the correct place (the axios 'then' promise)
Try putting res.send
outside of the 'then'. You'll get an error!
Note that this app sends out the HTML for , minus the images due to the images having links relative to
Let's modify the example above to make a request to OMDB's API.
We'll be using this endpoint: