A Beginner’s Guide to Using Axios in Node.js: Simplifying HTTP Requests

In web development, it’s essential to understand how data is exchanged between clients (users interacting with the application) and servers (where data is stored for applications). Hypertext Transfer Protocol (HTTP) requests facilitate this exchange. In this article, we delve into the world of HTTP requests, specifically exploring Axios and how it simplifies how we structure code when defining these requests.

Disclaimer: You should have a basic understanding of HTML, CSS, JavaScript, and APIs for this article.

What is an HTTP Request?

An HTTP request refers to a communication protocol utilized by web servers and client-side applications for exchanging data over the Internet. Operating based on the Hypertext Transfer Protocol, this protocol enables users to initiate requests from their client-side applications to web servers. Upon receiving these requests, the server processes them and generates appropriate responses. This interaction facilitates various actions, including retrieving, modifying, sending, and deleting data stored on the server. These actions are defined in Axios as GET, POST, PUT, and DELETE requests respectively.

These HTTP requests can range from simple tasks such as signing into a user profile or adding an item to your favorites, to more complex actions like updating contact information or deleting a playlist from your library. In response, the server performs corresponding actions such as retrieving profile information, updating database records, or deleting relevant data tables.

What is Axios?

Axios is a popular JavaScript library used for making HTTP requests from the client-side. It offers a concise and intuitive way to send asynchronous HTTP requests to web servers, enabling developers to avoid having to write hundreds of lines of code to accomplish the same thing. The main advantages of Axios include ease of use, built-in features, and compatibility with both browser and Node.js environments.

How to Use Axios?

Installation

Start by installing Axios using one of the following terminal commands, depending on whether you use npm or yarn.

npm install axios

yarn add axios

Importing

Then you need to import it into your working file using the traditional ‘require’ syntax or the ES6 ‘import’ syntax.

const axios = require('axios');

import axios from 'axios';

Making Requests

Once you’ve installed and imported Axios into your working file, you can use Axios’ simple syntax to make a request. For example, making a GET request to fetch data from an API endpoint.

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

This GET request starts by accessing the API via the “/data” endpoint. Once it reaches the endpoint it would ideally retrieve that raw data and log it to the console. However, if it is unable to reach the endpoint, it logs an error to the console. In the context of a real application, logging the raw data to the console could more practically be something like storing that data into a variable to later render a profile homepage with a user’s information that matches a set of login credentials.

As a comparison, this is what a GET request looks like without the use of Axios:

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Error fetching data:', error);
  });

Axios also supports other HTTP methods like POST, PUT, and DELETE, enabling you to perform a wide range of operations with ease. To follow the example from earlier of a user profile, you might use a POST request to change data like updating a user’s bio or editing a post they made. A PUT request adds data and may be used to add a new post or add something to favorites. Lastly, a DELETE request, as you might imagine, deletes data, which could be used for deleting a post or even deleting a user’s profile altogether.

Conclusion

Understanding HTTP requests is essential for building robust and efficient web applications. By leveraging tools like Axios, developers can streamline the process of making requests and efficiently handle responses. Mastery of HTTP requests and utilizing Axios and libraries like it will equip you with the tools to create modern and dynamic web applications.

Documentation

You can find the original Axios documentation here.

NPM Axios documentation.

Yarn Axios documentation.