DOM & Browsermedium

Compare Fetch API and XMLHttpRequest

Discuss the differences between the Fetch API and the older XMLHttpRequest API for making HTTP requests in the browser. Highlight advantages and disadvantages of each, including use cases.

#fetch-api#xmlhttprequest#http-requests

Answer

The Fetch API and XMLHttpRequest (XHR) offer different approaches for HTTP requests in the browser:

  • Fetch API:

    • Promise-Based: Supports promises for easier chaining and handling of asynchronous requests.
    • Streamlined: More concise and flexible syntax compared to XHR.
    • Better Support for CORS: Simplifies cross-origin requests.
    • No Automatic Timeout: Must be manually handled.

  • XMLHttpRequest:

    • Older API: Widely supported but more verbose and complex.
    • Events for State Changes: Uses event listeners for tracking progress.
    • Synchronous Requests Possible: Can block the browser, which is discouraged now.
    • Legacy Support: Necessary for older browsers.

Use Cases:

  • Use Fetch API for modern web applications needing promise-based handling.
  • Use XMLHttpRequest for legacy systems or compatibility with older browsers.

Practise more DOM & Browser questions →