Introduction à fetch()

fetch() vous permet d'effectuer des requêtes réseau semblables à XMLHttpRequest (XHR). La principale différence est que l'API Fetch utilise des promesses, qui disposent d'une API plus simple pour vous aider à éviter les rappels complexes dans l'API XMLHttpRequest.

Si vous n'avez jamais utilisé les promesses auparavant, consultez Présentation des promesses JavaScript.

Demande de récupération de base

Voici un exemple d'implémentation avec XMLHttpRequest, puis fetch. Nous voulons demander une URL, obtenir une réponse et l'analyser au format JSON.

XMLHttpRequest

Un XMLHttpRequest a besoin de deux écouteurs pour gérer les cas de réussite et d'erreur, et d'un appel à open() et send(). Exemple tiré de la documentation MDN

function reqListener() {
    var data = JSON.parse(this.responseText);
    console.log(data);
}

function reqError(err) {
    console.log('Fetch Error :-S', err);
}

var oReq = new XMLHttpRequest();
oReq.onload = reqListener;
oReq.onerror = reqError;
oReq.open('get', './api/some.json', true);
oReq.send();

Méthode fetch

Notre requête de récupération se présente comme suit:

fetch('./api/some.json')
  .then(
  function(response) {
    if (response.status !== 200) {
      console.log('Looks like there was a problem. Status Code: ' +
        response.status);
      return;
    }

    // Examine the text in the response
    response.json().then(function(data) {
      console.log(data);
    });
  }
  )
  .catch(function(err) {
    console.log('Fetch Error :-S', err);
  });

La requête fetch() n'a besoin que d'un seul appel pour effectuer le même travail que dans l'exemple XHR. Pour traiter la réponse, nous vérifions d'abord que l'état de la réponse est 200, puis nous analysons la réponse au format JSON. La réponse à une requête fetch() est un objet Stream, ce qui signifie qu'après avoir appelé la méthode json(), une promesse est renvoyée. Le flux se déroule de manière asynchrone.

Métadonnées de réponse

L'exemple précédent montrait l'état de l'objet Response et comment analyser la réponse au format JSON. Voici comment gérer les autres métadonnées auxquelles vous pourriez vouloir accéder, telles que les en-têtes:

fetch('users.json').then(function(response) {
    console.log(response.headers.get('Content-Type'));
    console.log(response.headers.get('Date'));

    console.log(response.status);
    console.log(response.statusText);
    console.log(response.type);
    console.log(response.url);
});

Types de réponses

Lorsque nous effectuons une requête de récupération, la réponse reçoit le response.type "basic", "cors" ou "opaque". Ces types indiquent l'origine de la ressource, et vous pouvez les utiliser pour déterminer comment traiter l'objet de réponse.

Lorsque le navigateur demande une ressource ayant la même origine, la réponse possède un type basic avec des restrictions sur ce que vous pouvez afficher à partir de la réponse.

Si une requête est effectuée pour une ressource sur une autre origine et que cette origine renvoie des en-têtes COR, le type est cors. Les réponses cors sont semblables aux réponses basic, mais elles limitent les en-têtes que vous pouvez afficher à Cache-Control, Content-Language, Content-Type, Expires, Last-Modified et Pragma.

Les réponses opaque proviennent d'une origine différente qui ne renvoie pas d'en-têtes CORS. Avec une réponse opaque, nous ne pouvons pas lire les données renvoyées ni afficher l'état de la requête, ce qui signifie que vous ne pouvez pas vérifier si la requête a abouti.

Vous pouvez définir un mode pour une requête d'exploration afin que seuls certains types de requêtes soient résolus. Les modes que vous pouvez définir sont les suivants:

• same-origin ne réussit que pour les requêtes concernant des éléments de la même origine et rejette toutes les autres requêtes.
• cors autorise les requêtes pour des éléments de même origine et d'autres origines qui renvoient les en-têtes COR appropriés.
• cors-with-forced-preflight effectue une vérification préliminaire avant d'envoyer une requête.
• no-cors est destiné à envoyer des requêtes à d'autres origines qui n'ont pas d'en-têtes CORS et qui génèrent une réponse opaque. Toutefois, comme indiqué , cela n'est pas possible pour le moment dans le champ d'application global de la fenêtre.

Pour définir le mode, ajoutez un objet d'options en tant que deuxième paramètre de la requête fetch, puis définissez le mode dans cet objet:

fetch('http://some-site.com/cors-enabled/some.json', {mode: 'cors'})
    .then(function(response) {
    return response.text();
    })
    .then(function(text) {
    console.log('Request successful', text);
    })
    .catch(function(error) {
    log('Request failed', error)
    });

Enchaînement de promesses

L'une des grandes caractéristiques des promesses est la possibilité de les enchaîner. Pour fetch(), cela vous permet de partager la logique entre les requêtes de récupération.

Si vous travaillez avec une API JSON, vous devez vérifier l'état et analyser le JSON pour chaque réponse. Vous pouvez simplifier votre code en définissant l'état et l'analyse JSON dans des fonctions distinctes qui renvoient des promesses, et utiliser la requête de récupération pour ne gérer que les données finales et le cas d'erreur.

function status(response) {
    if (response.status >= 200 && response.status < 300) {
    return Promise.resolve(response)
    } else {
    return Promise.reject(new Error(response.statusText))
    }
}

function json(response) {
    return response.json()
}

fetch('users.json')
    .then(status)
    .then(json)
    .then(function(data) {
    console.log('Request succeeded with JSON response', data);
    }).catch(function(error) {
    console.log('Request failed', error);
    });

Cet exemple définit une fonction status qui vérifie response.status et renvoie une promesse résolue en tant que Promise.resolve() ou une promesse refusée en tant que Promise.reject(). Il s'agit de la première méthode appelée dans la chaîne fetch().

Si la promesse est résolue, le script appelle ensuite la méthode json(), qui renvoie une deuxième promesse de l'appel response.json() et crée un objet contenant le JSON analysé. Si l'analyse échoue, la promesse est refusée et l'instruction catch s'exécute.

Cette structure vous permet de partager la logique entre toutes vos requêtes de récupération, ce qui facilite la gestion, la lecture et le test du code.

Demande POST

Parfois, une application Web doit appeler une API avec une méthode POST et inclure certains paramètres dans le corps de la requête. Pour ce faire, définissez les paramètres method et body dans les options fetch():

fetch(url, {
    method: 'post',
    headers: {
        "Content-type": "application/x-www-form-urlencoded; charset=UTF-8"
    },
    body: 'foo=bar&lorem=ipsum'
    })
    .then(json)
    .then(function (data) {
    console.log('Request succeeded with JSON response', data);
    })
    .catch(function (error) {
    console.log('Request failed', error);
    });

Envoyer des identifiants avec une requête de récupération

Pour effectuer une requête de récupération avec des identifiants tels que des cookies, définissez la valeur credentials de la requête sur "include":

fetch(url, {
    credentials: 'include'
})