How is Fetch different from XMLHttpRequest (XHR)?

The Fetch API and XMLHttpRequest (XHR) are both used to make network requests in web applications, but they have significant differences in terms of syntax, functionality, and usability. Understanding these differences is crucial for modern web development, as Fetch has become the preferred method for handling HTTP requests due to its simplicity and promise-based architecture. Below, I will outline the key differences, practical examples, best practices, and common mistakes associated with both approaches.

Key Differences

Syntax and Usability

One of the most noticeable differences between Fetch and XHR is the syntax. Fetch uses a cleaner and more modern syntax that is promise-based, making it easier to read and write asynchronous code.

 
// Using Fetch
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('There was a problem with the fetch operation:', error));

// Using XHR
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onload = function () {
  if (xhr.status >= 200 && xhr.status < 300) {
    console.log(JSON.parse(xhr.responseText));
  } else {
    console.error('Request failed with status:', xhr.status);
  }
};
xhr.onerror = function () {
  console.error('There was a problem with the request.');
};
xhr.send();

Response Handling

Fetch provides a more straightforward way to handle responses. It returns a promise that resolves to the Response object representing the response to the request. This allows for easier chaining of operations, such as parsing the response as JSON or text.

Stream Handling

Fetch supports streaming of request and response bodies, allowing developers to work with data as it is being received. This is particularly useful for large files or when working with real-time data.

Best Practices

• Always Check Response Status: When using Fetch, always check if the response is OK before proceeding to parse the data. This can prevent runtime errors and improve error handling.
• Use Async/Await: For cleaner and more readable code, consider using async/await syntax with Fetch. This approach makes it easier to handle asynchronous operations.

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Fetch error:', error);
  }
}
fetchData();

• Handle CORS Properly: When making requests to different origins, ensure that the server supports Cross-Origin Resource Sharing (CORS) to avoid issues.

Common Mistakes

• Ignoring Promise Rejection: A common mistake is not handling promise rejections. Always include a catch block to handle errors gracefully.
• Assuming Response is JSON: Developers often assume that the response will always be JSON. Always check the content type before parsing.

fetch('https://api.example.com/data')
  .then(response => {
    const contentType = response.headers.get('content-type');
    if (contentType && contentType.includes('application/json')) {
      return response.json();
    } else {
      throw new TypeError('Oops, we haven\'t got JSON!');
    }
  })
  .then(data => console.log(data))
  .catch(error => console.error('Fetch error:', error));

• Not Using AbortController: When making multiple requests, it’s important to manage them properly. Use AbortController to cancel requests when they are no longer needed.

In conclusion, while both Fetch and XMLHttpRequest can be used to make network requests, Fetch provides a more modern and user-friendly approach. By understanding the differences, best practices, and common mistakes, developers can leverage the Fetch API to create more efficient and maintainable web applications.