Pourquoi la méthode .json() de Fetch renvoie-t-elle parfois une promesse et parfois une valeur ?

Exploration du comportement de promesse dans la méthode .json() de Fetch

Lors de l'exploration de l'API Fetch, une bizarrerie intrigante surgit avec la méthode .json(). Voyons pourquoi il renvoie une promesse dans certaines circonstances et une valeur directe dans d'autres.

Considérez l'extrait suivant :

fetch(url)
  .then(response => {
      return {
          data: response.json(),
          status: response.status
      }
  })
  .then(post => document.write(post.data));

Ici, post.data génère un objet de promesse, suggérant que l'appel .json() dans le premier gestionnaire .then() renvoie une promesse.

Cependant, si nous modifions le code pour simplement enchaîner .json() :

fetch(url)
  .then(response => response.json())
  .then(post => document.write(post.title));

post devient désormais un objet, permettant un accès direct à l'attribut title.

Pour percer ce mystère, nous devons comprendre la nature des promesses. .json() lance une opération asynchrone pour récupérer le corps de la réponse HTTP au format JSON, renvoyant une promesse. Cette promesse représente la disponibilité éventuelle des données analysées par JSON.

Lorsque la promesse est renvoyée par un gestionnaire .then() (comme dans le premier exemple), la promesse continue d'exister au sein de la chaîne. Cependant, lorsqu'une valeur est renvoyée (comme dans le deuxième exemple), la promesse est considérée comme « remplie » et la valeur renvoyée est adoptée comme résultat du .then() externe.

Pour gérer de telles situations, vous pouvez soit enchaîner les promesses en utilisant des .then() imbriqués :

fetch(url).then(response => 
    response.json().then(data => ({
        data: data,
        status: response.status
    })
).then(res => {
    console.log(res.status, res.data.title)
}));

Ou utiliser des mots-clés asynchrones modernes comme async et wait :

const response = await fetch(url);
const data = await response.json();
console.log(response.status, data.title);

N'oubliez pas de toujours vérifier l'état de la réponse HTTP avant de tenter d'analyser le JSON, car il se peut qu'il ne soit pas toujours dans le format attendu.

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!