Maison >interface Web >js tutoriel >Pourquoi `fetch().then().json()` renvoie-t-il parfois une promesse et parfois non ?

Pourquoi `fetch().then().json()` renvoie-t-il parfois une promesse et parfois non ?

Mary-Kate Olsen
Mary-Kate Olsenoriginal
2024-12-11 14:19:11455parcourir

Why Does `fetch().then().json()` Sometimes Return a Promise and Sometimes Not?

Pourquoi .json() renvoie-t-il une promesse, mais pas lorsqu'elle passe par .then() ?

Question :
Lors de l'utilisation de l'API Fetch, on observe que la méthode .json() renvoie un objet Promise lorsqu'elle est utilisée dans un objet littéral dans un gestionnaire .then(). Cependant, lorsqu'il est utilisé sans objet littéral, il renvoie directement la valeur.

Réponse :

Concernant les promesses :

.json() renvoie une promesse car la réponse HTTP est reçue lorsque les en-têtes sont disponibles, mais le corps (dans ce cas, JSON) n'est pas encore chargé. .json() récupère une deuxième promesse pour le corps, qui doit être chargée séparément.

Concernant le comportement de .then() :

Lorsqu'une promesse est renvoyée par un Rappel .then(), il est adopté par la chaîne externe. Cela signifie que le .then() externe recevra la valeur remplie de la promesse interne. Dans l'exemple donné, le .then() externe reçoit un objet avec les propriétés data et status, rendant effectivement la propriété data disponible directement dans le .then().

Solutions alternatives :

Pour accéder à la fois au statut et aux données JSON directement dans un seul gestionnaire .then(), vous pouvez utiliser les techniques suivantes :

  • Utiliser Blocs .then() imbriqués :
fetch(url)
  .then(response => response.json())
  .then(data => {
    console.log(response.status, data.title);
  });
  • Utiliser async/await (nécessite une fonction asynchrone) :
const response = await fetch(url);
const data = await response.json();
console.log(response.status, data.title);

N'oubliez pas de vérifier la réponse statut avant de lire le corps, car il peut ne pas toujours contenir de données JSON.

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn