Use Axios NPM to Generate HTTP Requests [Step-by-Step]

Axios js is a promise-based HTTP library that lets you consume an API service. It offers different ways of making HTTP requests such as GET, POST, PUT, and DELETE. Axios can be used in any JavaScript framework, and once installed, it enables your application to interact with an API service. 

In this article, you'll learn about the Axios npm package and how it is used to generate HTTP requests with NodeJS. 

Are you looking for the best course material to learn Node.js topics from scratch? Check out the Node.js course online, and get guidance from experts and industry professionals. 

What is Axios? 

Interacting with REST APIs and performing CRUD operations are made simple with Axios. JavaScript libraries such as Vue, React, and Angular can use Axios. Even JavaScript can work seamlessly with Axios. 

Why Use Axios NPM Package?

The following are some reasons why you should be using Axios for all your API requests: 

1. It saves time 
2. It works well with JSON data by default. In contrast to other options like the FetchAPI, you often wouldn't need to set headers. 
3. The function names in Axios are compatible with all HTTP methods. For example, the `.get()` function is used to execute a GET request. 
4. Axios uses less code and achieves more. In contrast to the FetchAPI, you require single .then() callback to get the JSON data you requested for. 
5. Axios handles errors better. You receive a range of error codes from 400 to 500 from Axios. In contrast to the FetchAPI, you can check the status code before throwing the error. 
6. Both the client and the server can utilize Axios which comes in handy when developing a Node.js application. 

Axios Features

These are some of the benefits of using Axios. 

• Use the browser to send XMLHttpRequests 
• Use NodeJs to send HTTP requests 
• Backs up the Promise API 
• Requests can be intercepted 
• Responses can be changed 
• Requests can be canceled. 
• Automatic data object serialization to multipart/form-data and x-www-form-urlencoded body encodings. 
• Automatic transformations for JSON data. 
• Client-side protection against CSRF attacks. 

Browser Support

Although not all browsers support Axios, the important ones do, and they include: 

• Chrome 
• Mozilla Firefox 
• Safari 
• Opera 
• Microsoft Edge 
• Internet Explorer 

Axios Basic API   

Excerpts from Axios documentation show that you can perform get, post, put, patch, and delete operations with Axios using a simple API structure, such as: 

const axios = require('axios'); 
async function makeRequest() { 
const config = { 
method: 'get', 
url: 'http://webcode.me' 
} 
 
let res = await axios(config) 
console.log(res.status); 
} 
 
makeRequest(); 

In the code above, we sent an HTTP request to http://webcode.me by setting up the configuration options before sending the request responding with the output 200. 

Do you want to learn web development? Check out our Web Designing and Development course. 

Axios Status Code 

HTTP status codes indicate if a certain request was successful. The replies are divided into five categories: 

• Informational answers (100–199) 
• Effective reactions (200–299) 
• Redirects (300–399) 
• Client blunders (400–499) 
• Server issues (500–599) 

Basic Information of Axios NPM Package 

Below mentioned are the basic information you must know about Axios. 

• Axios is a promised-based HTTP client for the browser and NodeJs. 
• Axios could be installed, by using `npm install axios` on the terminal of your JavaScript project. There is also a provision to interact with Axios using their CDN. 
• Axios has a weekly download of about 31,658,164. 
• The GitHub repository that includes the documentation for Axios can be found at github.com/axios/axios. 
• Axios can be used in multiple frameworks such as React, Vue, and Angular. 

How to Install Axios using npm Package [Step-by-Step] 

Axios can be used in both the browser and in a NodeJs environment. This means it can be installed using `npm` and in Vanilla JavaScript using the Axios script provided on the CDN. Let's explore in detail how Axios can be installed in your project. 

Using npm 

The npm library has access to Axios, which is simple to install in the project by executing npm install axios in the terminal of your code editor: 

Or using yarn 

$ yarn add axios 
Or jsDelivr CDN 

Use this in your HTML file 

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> 

Using unpkg CDN 

<script scr="https://unpkg.com/axios/dist/axios.min.js"></script> 

Or browser 

$ bower install axios 

Step 1: Axios Post Request

Axios can be used to ‘post’ data to an endpoint through a POST request. This endpoint can then utilize this POST request to carry out a certain action or start an event. 

An Axios Post request is created with the post method. Automatically, Axios serializes JavaScript Object to JSON when passed to the post method as the second parameter; POST bodies don’t need to be serialized to JSON. 

Ensure that you run the following examples in a file called index.js which you can create yourself and execute on the terminal as instructed. 

const axios = require('axios'); 
async function doPostRequest() { 
let payload = { name: 'John Doe', occupation: 'gardener' }; 
let res = await axios.post('http://httpbin.org/post', payload); 
let data = res.data; 
console.log(data); 
} 
doPostRequest(); 

The above code when run on the terminal with $node index.js produces the result below. 

Step 2: Axios Get Request

The GET method is for retrieving data from an HTTP service. In most cases, it only requires the URL of the endpoint you wish to retrieve data from. There is an exception to this if the API gateway requires a token. 

See the example below: 

const axios = require('axios'); 
axios.get('http://webcode.me').then(resp => console.log(resp.data)); 

Running the above code on the terminal responds with the following output. 

Methods for Axios HTTP Requests

Additionally, Axios offers several other request methods which are listed below: 

axios.request(config) 
axios.get(url[, config]) 
axios.delete(url[, config]) 
axios.head(url[, config]) 
axios.options(url[, config]) 
axios.post(url[, data[, config]]) 
axios.put(url[, data[, config]]) 
axios.patch(url[, data[, config]]) 

While you still can, Learn Node the right way at KnowledgeHut. 

Step 3: Response and Concurrent Request Handling

Response and Concurrent request handling refer to the number of requests the system can process simultaneously. Concurrent requests on a website talk about the requests received from many users at once. 

To run several HTTP requests at the same time all you do is send an array of URLs to the axios.all() method. When the requests have been sent, you’ll be given an array containing the response object in the order in which they were sent: 

const axios = require('axios'); 
const loadUsers = async () => { 
try { 
const [res1, res2] = await axios.all([ 
axios.get('https://reqres.in/api/users/1'), 
axios.get('https://reqres.in/api/users/2') 
]); 
console.log(res1.data); 
console.log(res2.data); 
} catch (err) { 
console.error(err); 
} 
}; 
loadUsers(); 

See the output below. 

Additionally, you can spread the array across many arguments with axios.spread() which results in the same output as the one above. 

const axios = require('axios'); 
axios.all([ 
axios.get('https://reqres.in/api/users/1'), 
axios.get('https://reqres.in/api/users/2') 
]) 
.then(axios.spread((res1, res2) => { 
console.log(res1.data); 
console.log(res2.data); 
})); 

Step 4: Error Handling

If an error occurs when submitting an HTTP request using Axios, the resultant error object has comprehensive information that will enable us to identify the precise location of the fault. 

There are three places in this instruction where mistakes might happen, as seen in the sample below. Because Axios is a promise-based library, addressing errors is straightforward. If any issues arise while processing the request, can use the promise's catch() function to catch them: 

const axios = require('axios'); 
const unknown = async () => { 
try { 
const res = await axios.get('https://example.com/unkown'); 
console.log(res.data); 
} catch (err) { 
if (err.response) { 
console.log(err.response.data); 
console.log(err.response.status); 
console.log(err.response.headers); 
} else if (err.request) { 
console.log(err.request); 
} else { 
console.error('Error:', err.message); 
} 
} 
}; 
unknown(); 

See the error snapshot below.

Check out Full Stack Developer Bootcamp if you're keen to become a full-stack developer. 

Step 5: POST JSON Using Axios

When a Javascript object is the 2nd parameter to axios.post() function, Axios will automatically serialize the object to JSON for you. Additionally, Axios will change the Content-Type header to application/JSON so web frameworks like Express can interpret it automatically. 

Make sure the Content-Type header is specified if you wish to use axios.post() to deliver a pre-serialized JSON string as JSON. 

// Axios automatically serializes `{ answer: 42 }` into JSON. 
const axios = require('axios'); 
const checkSerialize = async () => { 
const res = await axios.post('https://httpbin.org/post', { answer: 42 });  
const data = res.data.data; 
const ct = 
res.data.headers['Content-Type']; 
 
console.log("Data: ", data) 
console.log("Content-Type: ", ct) 
}; 
checkSerialize(); 

The above code snippet means you normally don't have to worry about serializing POST bodies to JSON, Axios handles it for you. See the output below. 

Step 6: Requests and Responses Transformation

Request and Response transformations are used in sending and receiving data from the server. When you send a request to the server it returns a response, Axios response objects are. 

• Data - the payload that the server returned. 
• Status - the HTTP code that the server returned. 
• StatusText - the response message from the server. 
• Headers - Information sent by the server. 
• Config - the original request configuration. 
• Request - the request object. 

Step 7: Multiple Requests with Axios

Axios can be used to create multiple requests in a finger snap. And since Axios returns a Promise, we can go for multiple requests using Promises. Fortunately, Axios ships with a function named all; let's utilize it and add two more requests. 

const axios = require('axios'); 
async function doRequests(urls) { 
const fetchUrl = (url) => axios.get(url); 
const promises = urls.map(fetchUrl); 
let responses = await Promise.all(promises); 
responses.forEach(resp => { 
let msg = `${resp.config.url} -> ${resp.headers.server}: ${resp.status}`; 
console.log(msg); 
}); 
} 
let urls = [ 
'http://webcode.me', 
'https://example.com', 
'http://httpbin.org', 
'https://clojure.org', 
'https://fsharp.org', 
'https://symfony.com', 
'https://www.perl.org', 
'https://www.php.net', 
'https://www.python.org', 
'https://code.visualstudio.com', 
'https://github.com' 
]; 
doRequests(urls);  

The above codes produces the following result. 

Step 8: JSON Server with Axios

JSON Server is an npm package that enables you to quickly and easily develop mock REST APIs. It is used to provide an easy-to-use JSON database that can be used to answer HTTP queries. The HTTP client we'll use to send HTTP queries to the JSON server is called Axios. 

$ npm install -g json-server 

The above code installs the server. Now create a test JSON data called user.json and paste the below codes. 

{ 
"users": [ 
{ 
"id": 1, 
"first_name": "Robert", 
"last_name": "Schwartz", 
"email": "rob23@gmail.com" 
}, 
{ 
"id": 2, 
"first_name": "Lucy", 
"last_name": "Ballmer", 
"email": "lucyb56@gmail.com" 
}, 
{ 
"id": 3, 
"first_name": "Anna", 
"last_name": "Smith", 
"email": "annasmith23@gmail.com" 
}, 
{ 
"id": 4, 
"first_name": "Robert", 
"last_name": "Brown", 
"email": "bobbrown432@yahoo.com" 
}, 
{ 
"id": 5, 
"first_name": "Roger", 
"last_name": "Bacon", 
"email": "rogerbacon12@yahoo.com" 
} 
] 
} 

Now start the server with json-server --watch users.json. The --watch command is used to specify the data for the server. 

With the JSON server on, running the code below will produce the following result. 

const axios = require('axios'); 
axios.get('localhost:3000/users/3/').then(res => console.log(res.data)); 
{ 
"id": 3, 
"first_name": "Anna", 
"last_name": "Smith", 
"email": "annasmith23@gmail.com" 
} 

Click here for the full documentation.  

How to Remove Axios Package 

Uninstalling Axios is as easy as installing it. Use the following command options to remove Axios from your project: 

• Unscoped package npm uninstall Axios. 
• Scoped package npm uninstall <@scope/axios>. 
• Unscoped package npm uninstall --save <axios>. 
• Scoped package npm uninstall --save <@scope/axios>. 

Axios Proxy 

A proxy acts as an intermediary between a client who requests a resource and the server who fulfills that request. To make a valid proxy request using Axios, we’ll combine it with an HTTPs Proxy Agent by running npm install https-proxy-agent on your terminal. 

Next, paste the codes below in your index.js file and execute on the terminal using node index.js 

const axios = require('axios'); 
const httpsProxyAgent = require("https-proxy-agent"); 
const agent = new httpsProxyAgent("http://localhost:8001"); 
 
async function doGetRequest() { 
await axios.get("https://randomuser.me/api/?results=50", { 
httpAgent: agent 
}) 
.then(res => console.log(res.data.results)) 
.catch(error => console.log(error)); 
} 
 
doGetRequest(); 

The above codes produce the output below. 

How to Create a Custom useAxios Hook 

When the component mounts, you could write your custom hook using Axios to execute the same activity as a reusable function rather than using useEffect to get data. 

Although you can create this custom hook on your own, there is a great library called use-Axios-client that provides you with a custom useAxios hook. 

First, install the Axios package in a react project: 

npm install use-axios-client 
Import useAxios from use-axios-client at the start of the component to use the hook directly. 
import { useAxios } from "use-axios-client"; 
export default function App() { 
const { data, error, loading } = useAxios({ 
url: "https://jsonplaceholder.typicode.com/posts/1" 
}); 

if (loading || !data) return "Loading..."; 
if (error) return "Error!"; 
return ( 
<div> 
<h1>{data.title}</h1> 
<p>{data.body}</p> 
</div> 
) 
} 

The hook returns an object with all the variables you need to handle the various states: loading, error, and resolved data. You can use useAxios at the top of the app component and put in the URL you want to make a request. 

The word loading will be true while this request is being processed. Displaying the error status is important if there is one. In any case, you may show the returned data in the UI if you have it. 

This kind of custom hook has the advantage of significantly reducing the amount of code and making it simpler overall. 

Try using a unique useAxios hook like this one if you want data fetching with Axios to be even easier. 

Are you ready to unlock the power of Python? Dive into the world of programming with Python, the language that's perfect for beginners. Start your coding journey today and discover the endless possibilities of Python programming.

Conclusion

Finally, consuming API resources and communicating between web services is inevitable. A sound HTTP library is required to make HTTP requests for consuming resources from other websites. 

Axios is an excellent HTTP library that allows you to solve data communication problems on your website. It is promise-based, widely used in JavaScript, and has a simple syntax. 

Furthermore, whether you're working on the front end or the back end, Axios is extremely useful. Axios can integrate with NodeJs and JavaScript front-end frameworks like React, Vue, and Angular. When it comes to consuming API services, Axios is the real deal. 

If you are interested in exploring Node.js in-depth, we encourage you to sign up to learn Node.js at KnowledgeHut and upskill yourself.