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 ont un une API plus simple pour vous aider à éviter les rappels complexes dans le API XMLHttpRequest

Si vous n'avez jamais utilisé Promesses auparavant, consultez Introduction to JavaScript Promises (Présentation des promesses JavaScript).

Demande de récupération de base

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

XMLHttpRequest

Un XMLHttpRequest a besoin de deux écouteurs pour gérer la réussite et les cas d'erreur, ainsi qu'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();

Récupération

Notre demande 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 la requête XHR. à titre d'exemple. Pour traiter la réponse, nous vérifions d'abord que l'état de la réponse est 200, puis analysez la réponse au format JSON. La réponse à une requête fetch() est un objet Stream, ce qui signifie qu'après nous appelons la méthode json(), une promesse est renvoyée. Le flux a lieu de manière asynchrone.

Métadonnées de réponse

L'exemple précédent montre l'état l'objet Response et comment la réponse au format JSON. Voici comment gérer d'autres métadonnées que vous pourriez vouloir auxquels accéder, comme 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 un response.type. de "basic", cors ou "opaque". Ces types indiquent d'où vient la ressource, et vous pouvez les utiliser pour et déterminer comment traiter l'objet de réponse.

Lorsque le navigateur demande une ressource ayant la même origine, la réponse comporte une Type basic avec des restrictions sur ce que vous pouvez afficher dans la réponse.

Si une requête est effectuée pour une ressource située sur une autre origine et que cette origine renvoie En-têtes COR, le type est cors. cors sont semblables aux réponses basic, mais elles limitent les en-têtes que vous peut afficher pour 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 de CORS en-têtes. Avec une réponse opaque, nous ne pourrons pas lire les données renvoyées ou consulter 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 de récupération afin que seuls certains types de requêtes résoudre. Les modes que vous pouvez définir sont les suivants:

• same-origin n'aboutit que pour les demandes d'éléments ayant la même origine. rejette toutes les autres demandes.
• cors autorise les requêtes pour des éléments ayant la même origine ou d'autres origines renvoyer les en-têtes COR appropriés.
• cors-with-forced-preflight effectue une vérification préliminaire coche avant d'envoyer une demande.
• no-cors est destiné à envoyer des requêtes à d'autres origines qui n'utilisent pas le CORS et aboutissent à une réponse opaque, mais comme indiqué , il ne s'agit pas possible dans le champ d'application global de la fenêtre pour le moment.

Pour définir le mode, ajoutez un objet "options" comme deuxième paramètre dans la fetch et 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)
    });

Association de promesses

L'une des principales caractéristiques des promesses est leur capacité à les enchaîner. Pour fetch(), qui vous permet de partager une logique entre les requêtes d'extraction.

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 qui utilisent la récupération pour ne traiter 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 les éléments response.status et renvoie une promesse résolue sous la forme Promise.resolve() ou une promesse refusée 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 la méthode json(), qui renvoie une deuxième promesse à partir de l'appel response.json() et crée une contenant le fichier JSON analysé. Si l'analyse échoue, la promesse est rejeté et l’instruction catch s’exécute.

Cette structure vous permet de partager la logique entre toutes vos requêtes d'extraction, plus facile à gérer, à lire et à tester.

Demande POST

Parfois, une application Web doit appeler une API avec une méthode POST et inclure certaines dans le corps de la requête. Pour ce faire, définissez les paramètres method et body paramètres 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 Valeur credentials sur "include":

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