A Guide to Axios.

A Guide to Axios.

What is Axios?

Axios stands out as a powerful JavaScript library designed for asynchronous HTTP requests. This versatile tool enables us to perform a range of HTTP actions, including GET, POST, DELETE, PUT, PATCH, and more.

One of Axios' key strengths lies in its efficiency when handling server responses. Unlike the fetch API, Axios automatically manages the server's response, eliminating the need for manual parsing on our end after making an HTTP request.

Moreover, Axios streamlines the entire procedure of sending asynchronous HTTP requests to a server, offering a simplified and effective approach while seamlessly managing the corresponding responses.

How to use Axios?

const axios = require("axios");

axios
  .get("https://jsonplaceholder.typicodde.com/posts")
  .then(function (response) {
    // handling the success response
    console.log(response);
  })
  .catch(function (error) {
    // handle the error if there is any error
    console.log("Some error occured " + error.message);
  })
  .finally(function () {
    // this is the finally block get always executed
    console.log("finally");
  });

In the Code,

  • const axios = require('axios') we are importing the Axios from the Library.

  • axios.get("https://jsonplaceholder.typicodde.com/posts") we are making the GET request from Axios to the JSONPlaceholder API for the post.

  • .then(function(response){}) Now here we will parse handle the response returned by the server. The axios will automatically handle the parsing. we don't need to parse the response unlike fetch API

  • .catch(function(error){}) Here we will handle the error if any error occurred during the execution.

  • .finally(function(){}) This is the final block. As the name suggests this block always gets executed whether the request is successful or an error occurs.

How to make a POST request?

Axios makes it easy for developers to make any request either GET or POSTor any other request. Axios has its function named with the request with the help of which we can make the post request very easy by just using the request name.
for a clear understanding let's check into the code.

axios.post('https://jsonplaceholder.typicode.com/posts',{
    title: 'axios',
    body: 'post',
    userId: 1,
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

In the code,

  • const axios = require('axios') we are importing the Axios from the Library.

  • axios.post("https://jsonplaceholder.typicodde.com/posts") we are making the POST request from Axios to the JSONPlaceholder API for the post.

  • In the POST request we pass the optional JSON data which is the Body of the POST request in our code the body is { title: 'axios', body: 'post', userId: 1, }

  • .then(function(response){}) Now here we will parse handle the response returned by the server. The axios will automatically handle the parsing. we don't need to parse the response unlike fetch API

  • .catch(function(error){}) Here we will handle the error if any error occurred during the execution.

  • .finally(function(){}) This is the final block. As the name suggests this block always gets executed whether the request is successful or an error occurs.

Conclusion

In conclusion, Axios has proven to be a reliable and efficient tool for handling HTTP requests in JavaScript applications. Its simplicity, ease of use, and robust feature set have contributed to its widespread adoption within the developer community. Whether used in browser-based projects or with Node.js, Axios provides a clean and consistent interface for making asynchronous requests, handling responses, and managing various aspects of the HTTP protocol.