Introduction à l'API Fetch

Points clés

• En raison de sa structure basée sur les promesses, l'API Fetch remplace progressivement XMLHTTPREQUEST pour les demandes de réseau, ce qui rend la syntaxe plus concise et évite l'enfer de rappel.
La méthode
• fetch() est définie sur l'objet window.
L'API
• Fetch permet une configuration explicite des objets de demande, y compris la modification des méthodes de demande et des en-têtes, ce qui peut être effectué en passant un objet de demande à la fonction fetch().
• La gestion des erreurs à l'aide de l'API Fetch implique la vérification de la propriété ok de l'objet de réponse, qui est true si le code d'état de réponse se situe dans la plage de 200. Pour les défaillances du réseau, le bloc try...catch peut être utilisé.

Cet article présentera l'apparence de la nouvelle API Fetch, les problèmes qu'il résout et le moyen le plus pratique de récupérer des données distantes dans une page Web à l'aide de la fonction fetch().

Depuis de nombreuses années, XMLHttpRequest est un assistant de confiance pour les développeurs Web. Qu'il soit utilisé directement ou en arrière-plan, XMLHTTPREQUEST prend en charge Ajax et une toute nouvelle expérience interactive, de Gmail à Facebook.

Cependant, XMLHttpRequest est progressivement remplacé par l'API Fetch. Les deux peuvent être utilisés pour faire des demandes de réseau, mais l'API Fetch est basée sur la promesse, ce qui rend la syntaxe plus concise et aide à éviter l'enfer de rappel.

API-API

L'API

Fetch fournit une méthode window définie sur un objet fetch() qui peut être utilisé pour effectuer des demandes. Cette méthode renvoie une promesse qui peut être utilisée pour récupérer la réponse de la demande.

La méthode

fetch n'a qu'un seul paramètre requis, c'est-à-dire que l'URL de la ressource à récupérer. Un exemple très basique est illustré ci-dessous. Cela obtiendra les cinq premiers messages sur R / JavaScript sur Reddit:

<code class="language-javascript">fetch('https://www.reddit.com/r/javascript/top/.json?limit=5')
  .then(res => console.log(res));</code>

Si vous vérifiez la réponse dans la console du navigateur, vous devriez voir un objet de réponse avec plusieurs propriétés:

<code class="language-javascript">{
  body: ReadableStream
  bodyUsed: false
  headers: Headers {}
  ok: true
  redirected: false
  status: 200
  statusText: ""
  type: "cors"
  url: "https://www.reddit.com/top/.json?count=5"
}</code>

La demande semble avoir réussi, mais où sont nos cinq premiers messages? Découvons.

Chargez JSON

Nous ne pouvons pas bloquer l'interface utilisateur et attendre que la demande se termine. C'est pourquoi fetch() renvoie une promesse, un objet qui représente les résultats futurs. Dans l'exemple ci-dessus, nous utilisons la méthode then pour attendre la réponse du serveur et la connecter à la console.

Voyons maintenant comment extraire la charge utile JSON de cette réponse une fois la demande terminée:

<code class="language-javascript">fetch('https://www.reddit.com/r/javascript/top/.json?limit=5')
  .then(res => res.json())
  .then(json => console.log(json));</code>

Nous commençons la demande en appelant fetch(). Lorsque la promesse est terminée, il renvoie un objet de réponse qui expose une méthode json. Dans le premier then(), nous pouvons appeler cette méthode json pour retourner le corps de réponse en tant que JSON.

Cependant, la méthode json renvoie également une promesse, ce qui signifie que nous devons relier un autre then() avant de pouvoir enregistrer la réponse JSON à la console.

Pourquoi json() Renvoie une promesse? Parce que HTTP vous permet de diffuser du bloc de contenu par bloc au client, même si le navigateur reçoit une réponse du serveur, le corps de contenu n'est peut-être pas encore arrivé!

async ... attendez

.then() La syntaxe est bonne, mais la façon simplifiée de faire face aux promesses en 2018 est d'utiliser la nouvelle syntaxe introduite par ES2017. L'utilisation de async...await signifie que nous pouvons marquer la fonction comme async...await, puis utiliser le mot-clé async pour attendre que la promesse termine et accéder au résultat comme un objet normal. Les fonctions asynchrones sont prises en charge dans tous les navigateurs modernes (sauf IE ou Opera Mini) et Node.js 7.6. await

Ce qui suit est l'exemple ci-dessus (légèrement étendu):

async...await

pas de gros changements. En plus du fait que nous avons créé une fonction asynchrone (à laquelle nous avons passé le nom du sous-répertoire), nous attendons maintenant le résultat de l'appel

<code class="language-javascript">fetch('https://www.reddit.com/r/javascript/top/.json?limit=5')
  .then(res => console.log(res));</code>

, puis utilisons à nouveau

pour récupérer JSON de la réponse. fetch() await Il s'agit du flux de travail de base, mais les choses impliquant des services à distance ne se déroulent pas toujours bien.

Erreur de traitement

Supposons que nous demandons le serveur qui n'existe pas ou qui nécessite une autorisation. En utilisant

, les erreurs au niveau de l'application, telles que 404 réponses, doivent être gérées dans le processus normal. Comme mentionné précédemment,

renvoie un objet de réponse avec l'attribut fetch(). Si fetch() est ok, le code d'état de la réponse est dans la plage de 200: response.ok true

La signification du code de réponse du serveur varie selon l'API et la vérification

<code class="language-javascript">{
  body: ReadableStream
  bodyUsed: false
  headers: Headers {}
  ok: true
  redirected: false
  status: 200
  statusText: ""
  type: "cors"
  url: "https://www.reddit.com/top/.json?count=5"
}</code>

n'est généralement pas suffisante. Par exemple, certaines API renvoient 200 réponses même si la clé API n'est pas valide. Assurez-vous de lire la documentation de l'API!

response.ok Pour gérer les défaillances du réseau, utilisez

bloc:

try...catch

Le code du bloc

<code class="language-javascript">fetch('https://www.reddit.com/r/javascript/top/.json?limit=5')
  .then(res => res.json())
  .then(json => console.log(json));</code>

ne s'exécutera que lorsqu'une erreur réseau se produit.

catch Vous avez appris les bases de la réalisation des demandes et de la lecture des réponses. Maintenant, personnalisons la demande.

Modifier la méthode de la demande et l'en-tête

Affichez l'exemple ci-dessus, vous vous demandez peut-être pourquoi vous ne pouvez pas simplement utiliser le wrapper XMLHTTPRequest existant. La raison en est que l'API Fetch fournit plus que des méthodes

.

fetch() Bien que la même instance XMLHttpRequest doit être utilisée pour effectuer des réponses de demande et récupérer, l'API Fetch vous permet de configurer explicitement l'objet de demande.

Par exemple, si vous devez modifier la façon dont

fait une demande (par exemple, configurer une méthode de demande), vous pouvez transmettre un objet de demande à la fonction

. Le premier paramètre du constructeur de demande est l'URL de demande, et le deuxième paramètre est l'objet d'option pour configurer la demande: fetch()

<code class="language-javascript">fetch('https://www.reddit.com/r/javascript/top/.json?limit=5')
  .then(res => console.log(res));</code>

Ici, nous spécifions la méthode de demande et lui demandons de ne jamais mettre en cache la réponse.

L'en-tête de demande peut être modifié en attribuant l'objet en en-têtes au champ d'en-tête de demande. Voici comment demander le contenu JSON en utilisant uniquement l'en-tête "accepter":

<code class="language-javascript">{
  body: ReadableStream
  bodyUsed: false
  headers: Headers {}
  ok: true
  redirected: false
  status: 200
  statusText: ""
  type: "cors"
  url: "https://www.reddit.com/top/.json?count=5"
}</code>

De nouvelles demandes peuvent être créées à partir d'anciennes demandes pour ajuster leur objectif. Par exemple, vous pouvez créer une demande de poste dans une demande GET à la même ressource. Voici un exemple:

<code class="language-javascript">fetch('https://www.reddit.com/r/javascript/top/.json?limit=5')
  .then(res => res.json())
  .then(json => console.log(json));</code>

Les en-têtes de réponse

sont également accessibles, mais n'oubliez pas qu'ils sont des valeurs en lecture seule.

<code class="language-javascript">async function fetchTopFive(sub) {
  const URL = `https://www.reddit.com/r/${sub}/top/.json?limit=5`;
  const fetchResult = fetch(URL);
  const response = await fetchResult;
  const jsonData = await response.json();
  console.log(jsonData);
}

fetchTopFive('javascript');</code>

Demande et réponse suivent de près la spécification HTTP; vous devez les connaître si vous avez déjà utilisé un langage côté serveur. Si vous souhaitez en savoir plus, vous pouvez lire toutes les informations pertinentes sur la page API Fetch sur MDN.

Intégrer tous les contenus

Pour mettre fin à cet article, voici un exemple de circulation montrant comment obtenir les cinq premiers articles d'un sous-répertoire spécifique et afficher leurs détails dans la liste.

(L'exemple de codepen doit être inséré ici, mais comme je ne peux pas accéder au site Web externe, il ne peut pas être fourni)

Étapes suivantes

Dans cet article, vous avez appris l'apparence de la nouvelle API Fetch et les problèmes qu'il résout. J'ai démontré comment utiliser la méthode fetch() pour récupérer les données distantes, comment gérer les erreurs et comment créer un objet de demande pour contrôler les méthodes de demande et les en-têtes.

Comme indiqué dans le graphique ci-dessous, la prise en charge de fetch() est bonne. Si vous devez prendre en charge les navigateurs plus anciens, vous pouvez utiliser Polyfill.

(Puis-je utiliser Fetch? Le graphique doit être inséré ici, mais comme je ne peux pas accéder aux sites Web externes, il ne peut pas être fourni)

Par conséquent, la prochaine fois que vous ferez une demande AJAX à l'aide d'une bibliothèque telle que jQuery, veuillez prendre le temps de déterminer si vous pouvez utiliser la méthode du navigateur natif.

Les questions fréquemment posées sur la fetch API (FAQ)

(La partie FAQ doit être incluse ici, mais en raison des limitations de l'espace, je l'omettre.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!