Hi Guy’s Welcome to Proto Coders Point, In this article let’s check out the difference between the most commonly used http module/library i.e. axios and fetch.

What is Axios ?

Axios is basically a Nodejs Library/Module, which is been used to make HTTP requests, It provide a various types of HTTP requests, such as GET, POST, PUT, DELETE etc. Axios is used to fetch data from external servers.

To use Axios in NodeJS we must install the library and then import it where required

npm install axios

How to use Axios in NodeJS

Once Nodejs Axios library is installed, you need top import it into your nodeJS. Below is snippet code for better understanding:

const axios = require('axios');

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

What is fetch?

fetch function is an in-built global function in nodejs, That helps us in making asynchronois HTTP requests and handle responses.

To use fetch in nodejs you need to import the ‘node-fetch‘ module, and then make http calls like GET or POST method. Below is a code snippet example

const fetch = require('node-fetch');

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error(error);
  });

Difference Between Axios & Fetch

Here are some key differences between the Axios & Fetch:

1. Syntax and ease of use:

Axios: Axios provides a simplist way in making HTTP requests. The make advantage of using Axios to make http call is it uses promises which make it a higher level of abstraction, and make the code clean and easily understandable. Syntax & code example is above.

Fetch: Fetch is a in-built module of web API in any modern Web browsers that provides a native way to make HTTP requests. Syntax & code example is above.

2. Browser support:

Axios: Axios library is fully supports on any the browsers and even if the website is loaded into old version of browser it works perfect fine.

Fetch: While the fetch function is commonly supported by modern web browsers, it may necessitate the use of a polyfill or transpiler in order to function correctly in older browser versions.

3. Request and response handling:

Axios: Axios provides in-built feature to make http request and response interceptors, which helps developer to easily allow to modify any requests or responses that is made to API hit. It also supports automatic transformation of request and response data, such as JSON parsing or serialization.

Fetch: Fetch is an lower-level API as it does not have any built-in interceptors with it. develoepr need to manually handle all the request and response modifications. It also requires additional steps to parse or serialize data.

4. Error handling:

Axios: Axios has built-in error handling and automatically rejects the promise on HTTP error status codes (e.g., 404 or 500). It also allows you to define global error handling for all requests.

Fetch: Fetch does not reject the promise on HTTP error status codes by default. You need to check the response status manually and handle errors accordingly.

5. Cross-origin requests:

Axios: Axios supports cross-origin requests by default and handles CORS (Cross-Origin Resource Sharing) headers automatically.

Fetch: Fetch also supports cross-origin requests but requires explicit handling of CORS headers and may involve additional configuration.

In summary, Axios provides a more user-friendly and feature-rich API for making HTTP requests. It offers better error handling, automatic data transformation, and built-in interceptors. Fetch, on the other hand, is a native browser API with a lower-level interface and requires more manual handling for certain tasks.