Technology |

An Introduction to Axios: A Popular Promise-Based HTTP Client

By Pruthvi Darji on Jan 27, 2022
An Introduction to Axios A Popular Promise-Based HTTP Client

What is Axios? 

Axios is a simple promise-based HTTP client. It can run in the browser with help of frontend (React, Vue) or backend (Node JS) technologies with the same codebase.

Axios provides simple feasibility to use the library or npm package with a very extensible interface.

Axios makes it easy to send asynchronous HTTP requests to REST endpoints & perform operations as used for certain actions, in simple words CRUD operations (Create Read Update Delete).

IF I am saying simple Work then….

If you didn’t understand, let me explain to you in an easy way that it is a tool for making requests, basically Axios helps you to make HTTP requests as fetching or ajax to your backend or utilizing an API would be the way to go.

It can be used in plain JavaScript or with libraries such as React, Next JS, VueJS, etc.

Here are some examples of code snippets that illustrate the problem

Simple usage – GET

NPM/library to install AXIOS: npm install axios

import axios from ‘axios’;const url = ‘https://jsonplaceholder.typicode.com/posts’;

const fetchPosts = async() => {
                const { data } = await axios.get(url);
                console.log(data);
}

fetchPosts();

Simple usage – POST

import axios from ‘axios’;const url = ‘https://jsonplaceholder.typicode.com/posts’;

const fetchPosts = async() => {

                const { bookdata } = await axios.post(url , {
                     id: 93,
                     title: ‘AXIOS – Javascript’,
                     body: ‘this is promises demo’,
               });

               console.log(bookdata);

}

fetchPosts();

Fetch vs Axios

We can make HTTP requests with fetch also, why do we use the Axios package?

The reason is that there are more benefits of using Axios over fetch. When it comes to good error handling of HTTP interceptions, etc. That we can’t easily do with fetch.

Some great benefits of Axios like,

  • Supports the Promise API
  • Intercept request and response
  • Cancel requests
  • Transform request and response data
  • Automatic transforms for JSON data
  • Client-side support for protecting against Cross-Site Request

Upload/Download request progress

  • Axios: Support user to provide data transmission progress so user can show loading indicator/progressive bar while user communicating with the server via API calls.
  • Fetch: Doesn’t support

Browser Support

  • Axios: have side browser capabilities support, in the simple terms that support everywhere.
  • Fetch: only support limited browsers with version, likewise in Chrome 42+, Firefox 39+, Edge 14+, Safari 10.1

Also, you can check out this Video Link for more understanding: Video Link

Are you ready to hire remote developers? As We have a team of experts who can help in project Development.

Are you looking to Hire a Remote Developer?

Zignuts have a team of experts who can help you build your next project, click on the below button to meet our Business Representative

Enquire Now