Fetch, Axios and XHR: A Comparative Analysis of HTTP Request Tools In JavaScript

Axios and the Fetch API are two of the most popular ways to make an API call from a JavaScript application. Axios was first released in February 2014, and Fetch was first introduced in Chrome 42, released in April 2015.

Before understanding the differences between these techniques, let’s consider the scenario before Axios and Fetch became widely popular.

XMLHttpRequest

In the early days, developers used various techniques to make API calls, primarily: XMLHttpRequest (XHR) and jQuery’s .ajax() method, which is a simpler wrapper around XHR. XMLHttpRequest, a built-in browser API, was the first widely adopted method for making asynchronous HTTP requests in JavaScript

Advantages of XHR

• XHR is a versatile tool for making various types of HTTP requests, including GET, POST, PUT, DELETE etc.
• It can handle a wide range of data formats, such as JSON, XML, and plain text, making it suitable for diverse web development scenarios.
• XHR offers a detailed level of control over request and response handling, including event listeners and manual parsing, which can be beneficial for specific use cases requiring precise customisation.
• It still holds value for compatibility with older browsers.

Making an api call with XHR

var data = {
  name: "Abhishek",
  email: "wtf@abhishek.wtf"
};

function callApi() {
  var xhr = new XMLHttpRequest();
  xhr.open("POST", "https://abhishek.wtf/api", true);
  xhr.setRequestHeader("Content-Type", "application/json");

  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
      if (xhr.status === 200) {
        var response = JSON.parse(xhr.responseText);
        console.log("response:", response.data);
        // handle successful response
      } else {
        console.error("Request failed:", xhr.statusText);
        // handle error
      }
    }
  };

  xhr.send(JSON.stringify(data));
}

Challenges of XHR

XHR along with its pros came with its cons as well. Some of the biggest challenges were

• Callback Hell: Handling multiple asynchronous requests often led to nested callbacks, making code harder to read and maintain.
• Browser Compatibility: Ensuring consistent behavior across browsers required extra effort and polyfills.
• Manual JSON Parsing: Developers had to manually parse JSON responses before Fetch’s automatic parsing.

Fetch and Axios over XHR

In contrast to the challenges posed by XHR, Fetch and Axios provide some clear advantages.

• Promise-based: Cleaner syntax and better error handling with promises.
• Automatic JSON Handling: Fetch parses JSON responses automatically.
• Wide Browser Support: Fetch is built into modern browsers, and Axios has excellent compatibility.
• Flexibility and Features: Axios offers interceptors, automatic transforms, and other useful features.

Fetch or Axios

Now that we understand why the JavaScript ecosystem had to move beyond XHR, let’s explore the comparison between Fetch and Axios

Usage

• Axios: Axios is a robust third-party library that’s become the go-to for many developers due to its comprehensive feature set
• Fetch: Fetch API is browser-native and has also made its way into Node.js, presenting a standard built-in tool for HTTP requests.

Syntax

• Axios: When it comes to ease of use, Axios shines with its promise-based syntax that’s both simple and elegant.
• Fetch: Fetch API, while also promise-based, takes a more granular approach with a lower-level API, offering developers more control at the expense of verbosity.

Browser Compatibility

• Axios: Axios prides itself on its compatibility, working seamlessly across all browsers, including the older ones that many users might still operate
• Fetch: Fetch API targets modern browsers and is widely compatible but still there can be compatibility concerns in older browsers or environments.

Node.js Compatibility

• Axios: Axios is fully functional in Node.js
• Fetch: Fetch API is not natively available in older node.js environments and is stabilised only post node v21.0

React Native Compatibility

• Axios: Axios is fully compatible with React Native, offering a robust solution for making HTTP requests in mobile apps developed using this framework.
• Fetch: Fetch API is natively supported in React Native, enabling seamless HTTP requests directly within the framework without additional setup.

Interceptors

• Axios: One of Axios’ standout features is its ability to intercept requests and responses, allowing you to run code before a request is sent or after a response is received
• Fetch: Interceptors are not natively available in Fetch API, requiring custom implementation to achieve similar functionality.

Canceling Requests

• Axios: Cancellation is another aspect where Axios leads, providing built-in support for aborting requests. Cancelling can be particularly useful in search apps where you might need to cancel previous requests.
• Fetch: Fetch API requires a custom implementation, such as using an AbortController, to cancel requests

JSON handeling

• Axios: Axios automatically parses JSON responses, which can save time and simplify the code
• Fetch: Fetch API, in comparison, requires manual parsing, adding a step to your process when dealing with JSON data

Examples

Axios

import axios from 'axios';

const data = {
  name: "Abhishek",
  email: "wtf@abhishek.wtf"
};

async function callApi() {
  try {
    const response = await axios.post('abhishek.wtf/api', data);
    console.log("response:", response.data);
    // handle response
  } catch(error) {
    console.error("Request failed:", error);
    // handle error
  }
}

Fetch Api

const data = {
  name: "Abhishek",
  email: "wtf@abhishek.wtf"
};

async function callApi() {
  try {
    const rawResponse = await fetch('abhishek.wtf/api', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(data)
    });
    const response = await response.json();
    console.log("response:", response.data);
    // handle response
  } catch(error) {
    console.error("Request failed:", error);
    // handle error
  }
}

Conclusion

In conclusion, Axios and Fetch API suit different well with different needs in JavaScript development. Axios simplifies coding with advanced features, while Fetch offers detailed control. Axios adds a dependency in the bundle size and Fetch api is natively available in most environments. Choice depends on the project’s needs and the desired level of HTTP request control.

Side Notes: Images

Images used in this post are generated by ai from my personal accounts

Found any problem in this article? Email me at wtf@abhishek.wtf