How to Make API Calls with Axios
Greetings, friends! In the last two tutorials, I discussed how to make API calls using native functions provided by either the browser or the Node.js runtime. In this tutorial, I'd like to discuss the Axios library.
What is Axios?
Axios is an open source JavaScript library that can work in both the browser and Node.js. It is one of the most popular packages used to make API calls.
Internally, Axios uses what it calls adapters, that are modules that handle dispatching a request. It will automatically choose to use XHR objects if the environment is the browser, or it will use the HTTP module if the environment is Node.js. This lets us use Axios the same way whether we're in the browser or Node.js.
Remember, library authors still need to leverage native functions and tools to make API calls. The Axios library is an abstraction layer that simplifies a lot of code for us. The developers who worked on Axios created an API or set of tools with a much nicer pattern. Axios's pattern relies on the use of promises and adapters to improve the developer experience (DX).
Axios in the Browser
If you're using Axios in the browser, then you can use a CDN to import the library using a script element. Let's create a file named index.html with the following contents:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="api-call.js"></script>
</body>
</html>
Notice how we have two <script> elements: one for importing Axios and one for the api-call.js JavaScript file we're about to create. In a file named api-call.js, insert the following contents:
axios.get('https://jsonplaceholder.typicode.com/posts').then((response) => {
console.log(response.data);
});
Next, open up index.html in your favorite browser. If you open up the console in your browser's developer tools, you should see the same array of objects as the previous two tutorials. Using Axios to make API calls is much simpler than the other methods we've seen, huh? Our code is drastically shorter than using XHR objects in the browser or using the HTTP module in Node.js.
Notice how we use axios.get to make a GET request to the JSONPlaceholder API. If we wanted to make a POST request, we can use axios.post instead.
const postData = {
title: 'foo',
body: 'bar',
userId: 1,
};
axios.post('https://jsonplaceholder.typicode.com/posts', postData).then((response) => {
console.log(response.data);
});
Axios, by default, will set the response type to json. It will also setup a lot of configuration for you that makes it very easy to work with RESTful APIs.
Axios in Node.js
Let's now make a GET request using Axios in Node.js. To install Axios in Node.js, you need to initialize a package.json file and then install axios from npm.
npm init -y
npm i axios
Next, we can create a file called api-call-2.js with the following code:
const axios = require('axios');
axios.get('https://jsonplaceholder.typicode.com/posts').then((response) => {
console.log(response.data);
});
When you run this code with node api-call-2, you should see an array of objects returned to the console. We used a CDN to import Axios in the browser, but in Node.js, we need to use a require statement (or import statement if you're using ECMAScript modules).
The process for making a POST request is the same as in the browser, but make sure to import axios using a require statement!
const axios = require('axios');
const postData = {
title: 'foo',
body: 'bar',
userId: 1,
};
axios.post('https://jsonplaceholder.typicode.com/posts', postData).then((response) => {
console.log(response.data);
});
Conclusion
The Axios library makes it much easier to make API calls rather than using native functions built into the browser or Node.js. A lot of companies use Axios because of its simplicity and flexibility. It works in both the browser and Node.js, making the code almost identical between both environments.