JavaScript (ES-2015) The fetch method: replacing XMLHttpRequest

The fetch method: replacing XMLHttpRequest

The fetch method is the next generation XMLHttpRequest. It provides an improved interface for making requests to the server: both in terms of capabilities and control over what is happening, as well as syntax, as it is built on promises. Support in browsers is not yet very common, but there is a polyphile and not one.

Syntax

The syntax for the fetch method is:

let promise = fetch(url[, options]);

• url - the URL to which to make the request,
• options is an optional object with query settings.

options properties:

• method – query method,
• headers - request headers (object),
• body - request body: FormData, Blob, string, etc.,
• mode - one of: "same-origin", "no-cors", "cors", indicates in which mode of cross-domain it is supposed to make a request.,
• credentials - one of: "omit", "same-origin", "include", indicates whether to forward cookies and authorization headers along with the request.,
• cache - one of the "default", "no-store", "reload", "no-cache", "force-cache", "only-if-cached", indicates how to cache the request.,
• redirect - you can set "follow" for normal behavior with the code 30x (follow the redirect) or "error" for interpreting the redirect as an error.

As you can see, there are more options here than in XMLHttpRequest. At the same time, we must understand that if we use a polyphile, then nothing more flexible than the original XMLHttpRequest we do not get from this. Unless, fetch, probably, it will be more convenient to use.

Using

When fetch is called, it returns an indentation that, when the response is received, executes callbacks with a Response object or an error if the request fails.

Example:

'use strict';

fetch('/article/fetch/user.json')
  .then(function(response) {
    alert(response.headers.get('Content-Type')); // application/json; charset=utf-8
    alert(response.status); // 200

    return response.json();
   })
  .then(function(user) {
    alert(user.name); // iliakan
  })
  .catch( alert );

The response object, in addition to access to the headers headers, status status and some other response fields, makes it possible to read his body in the desired format.

The options are described in the Body specification, they include:

• response.arrayBuffer()
• response.blob()
• response.formData()
• response.json()
• response.text()

The corresponding call returns a promise, which, when the answer is received, will call a callback with the result.

In the example above, we can analyze the answer in the first .then and, if it suits us, return the promise with the desired format. The next .then will already contain the full server response.

More examples you can find in the description of the polyphile for fetch.

Total

The fetch method is already a convenient alternative to XMLHttpRequest for those who do not want to wait and love promises.

A detailed description of this method is in the standard Fetch, and the simplest examples of queries are in the description for the polyphyle.