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

In modern web development, generating HTTP requests is a fundamental task for interacting with APIs. The `axios npm` package is a powerful tool for making these requests seamlessly. Using `axios npm` simplifies the process of sending asynchronous HTTP requests to REST endpoints, allowing developers to focus on the functionality of their applications. 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. Axios is a promise-based HTTP client for JavaScript, which can be used in both the browser and Node.js environments.

The axios npm package provides an easy-to-use API that handles various HTTP request methods such as GET, POST, PUT, and DELETE. It automatically transforms JSON data, simplifies error handling, and supports request and response interception.

Why Use Axios NPM Package?

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

• It works well with JSON data by default. In contrast to other options like the FetchAPI, you often wouldn't need to set headers. 
• The function names in Axios are compatible with all HTTP methods. For example, the `.get()` function is used to execute a GET request. 
• 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. 
• It saves time
• 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. 
• Both the client and the server can utilize Axios which comes in handy when developing a Node.js application.

Check out our free technology courses to get an edge over the competition.

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 NPM can be installed in your project. 

A. 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]]) 

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.

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.  

Top Axios Features and Benefits

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 for Axios

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. 

What is 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.

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

Understanding HTTP Requests   

HTTP requests are essential for client-server communication in web applications. With `axios npm`, creating these requests becomes straightforward. For instance, a simple GET request to fetch data from an API can be written as:   

```javascript 
import axios from 'axios'; 
  
axios.get('https://api.example.com/data') 
  .then(response => { 
    console.log(response.data); 
  }) 
  .catch(error => { 
    console.error('Error fetching data:', error); 
  }); 
```   

Similarly, a POST request to send data can be implemented as: 

```javascript 
axios.post('https://api.example.com/data', { 
    name: 'John Doe', 
    age: 30 
  }) 
  .then(response => { 
    console.log('Data sent successfully:', response.data); 
  }) 
  .catch(error => { 
    console.error('Error sending data:', error); 
  }); 
``` 

Axios also supports advanced features such as request cancellation, custom headers, and automatic retries, making it a robust choice for handling HTTP communications. 

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>. 

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

Using the axios npm package significantly enhances the ease and efficiency of generating HTTP requests in web development. Its simple API, coupled with powerful features, makes Axios npm a preferred choice for developers looking to streamline their client-server interactions. Whether fetching data or sending information, `axios npm` provides the tools necessary to handle HTTP requests proficiently.

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

Axios is a reliable and efficient tool, facilitating seamless communication with external resources. To learn more about using Axios in Node.js, consider signing up for an Executive PG Programme in Full Stack Development from IIITB, offered at upGrad. 

Take the next step in your tech career with our popular software engineering courses, crafted to help you gain practical skills and industry knowledge.

Build expertise in the most in-demand software development skills with our comprehensive courses, designed to help you excel in the tech industry.

Unlock your potential with our free software development courses, offering essential skills to help you thrive in the world of tech.