Difference between fetch and XMLHttpRequest API

The fetch API and XMLHttpRequest are both used to make network requests in JavaScript, but they have several differences in terms of usage, capabilities, and design. Here is a detailed comparison:

1. Simplicity and Syntax

• XMLHttpRequest:

  • More verbose and complex to use.
  • Requires setting up callbacks for handling various states and events.
  • Example:

    var xhr = new XMLHttpRequest();
    xhr.open("GET", "https://api.example.com/data", true);
    xhr.onreadystatechange = function () {
      if (xhr.readyState == 4 && xhr.status == 200) {
        console.log(xhr.responseText);
      }
    };
    xhr.send();
    

• fetch:

  • More modern and concise syntax.
  • Returns a Promise, making it easier to handle asynchronous operations.
  • Example:

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

2. Promises vs Callbacks

• XMLHttpRequest:
  • Uses callbacks for handling responses and errors, which can lead to "callback hell" in complex scenarios.
• fetch:
  • Uses Promises, providing a cleaner and more manageable way to handle asynchronous operations.
  • Can be easily combined with async/await syntax for even more readability.

    async function fetchData() {
      try {
        const response = await fetch("https://api.example.com/data");
        const data = await response.json();
        console.log(data);
      } catch (error) {
        console.error('Error:', error);
      }
    }
    fetchData();
    

3. Handling Responses

• XMLHttpRequest:

  • Manually checks readyState and status to determine if the request was successful.
  • Response handling can be more cumbersome.

• fetch:

  • Automatically rejects the promise on network failure, but not on HTTP errors (e.g., 404 or 500). You have to check response.ok to handle HTTP errors.
  • Provides methods like .json(), .text(), .blob(), etc., to easily parse different types of responses.

    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:', error));
    

4. Progress Events

• XMLHttpRequest:
  • Supports progress events like progress, loadstart, load, and loadend, which can be used to monitor the progress of a request.
• fetch:
  • Does not natively support progress events.
  • For more control over the progress of a request, you need to use additional APIs like ReadableStream.

5. Abort Capability

• XMLHttpRequest:
  • Supports aborting an in-progress request using the abort() method.
• fetch:
  • Aborting fetch requests can be achieved using the AbortController API.

    const controller = new AbortController();
    const signal = controller.signal;
    
    fetch("https://api.example.com/data", { signal })
      .then(response => response.json())
      .then(data => console.log(data))
      .catch(error => {
        if (error.name === 'AbortError') {
          console.log('Fetch aborted');
        } else {
          console.error('Error:', error);
        }
      });
    
    // Abort the fetch request
    controller.abort();
    

6. Request and Response Streaming

• XMLHttpRequest:
  • Does not support request and response streaming natively.
• fetch:
  • Supports request and response streaming, allowing more efficient handling of large files or real-time data.

7. Built-in Cache Handling

• XMLHttpRequest:
  • Requires manual handling of caching headers and cache invalidation.
• fetch:
  • Includes built-in cache handling with the cache option, allowing easier and more flexible cache control.

    fetch("https://api.example.com/data", { cache: 'no-cache' })
      .then(response => response.json())
      .then(data => console.log(data));
    

Summary

Feature	XMLHttpRequest	fetch
Simplicity and Syntax	Verbose and callback-based	Modern, Promise-based
Promises vs Callbacks	Callbacks	Promises, async/await
Handling Responses	Manual checks	.ok, .json(), etc.
Progress Events	Supported	Not natively supported
Abort Capability	abort() method	AbortController
Streaming	Not supported	Supported
Cache Handling	Manual	Built-in options