Skip to content

Instantly share code, notes, and snippets.

@samoshkin

samoshkin/fetch_vs_xhr.md

Created November 1, 2018 20:04
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save samoshkin/8ab7bd52ffd17902fc64ba9a7e3ec9ac to your computer and use it in GitHub Desktop.
Save samoshkin/8ab7bd52ffd17902fc64ba9a7e3ec9ac to your computer and use it in GitHub Desktop.
Download ZIP
Fetch API features and limitations
Raw
fetch_vs_xhr.md

XHR limitations and drawbacks:

  • more complicated API, request and response concepts are mixed together.
  • lacks streaming, whole response is going to buffer in memory, not available for binary data

Fetch API features and pros:

  1. more pleasant simpler API. Has Request and Response abstractions, can be used separately (for example in ServiceWorkers). Based on Promises.
  2. supports streaming, response.body is ReadableStream, you can read data chunk by chunk without buffering, available for binary data. Can access partial content while response is being received.
  3. has cache control support (default, no-store, reload, no-cache, force-cache, only-if-cached)
  4. has better control of cross-origin (same-origin, cors, no-cors) and credentialed requests (omit, same-origin, include)
  5. has control of redirects
  6. can set referrer policy (no-referrer, no-referrer-when-downgrade, origin, origin-when-cross-origin)
  7. XHR can parse XML/HTML directly returning a Document in its "response" property. It's not possible to get a Document back directly from the Fetch API itself. But you can use DOMParser.parseFromString() and parse response.text() yourself.

Fetch API limitations:

  1. not supported in IE, there is a polyfill, but it can implement only a subset of features
  2. Previously it didn't have ability to abort requests. Now it's possible with a help of "AbortController+AbortSignal" API
  3. Does not support tracking progress. For downloads you can implement it yourself by getting total legnth from Content-Length response header and reading raw data chunk by chunk from ReadableStream (it's not trivial). And for tracking uploads progress, it's impossible right now.
  4. Does not support requests timeouts. Specification does not have request timeouts, so you need to implement your own timeout logic.

If you need features that Fetch API lacks, you can either use XHR directly or use some HTTP client library, like axios or superagent.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment