Pourquoi la méthode `.json()` de l'API Fetch a-t-elle des comportements de promesse différents ?

Gestion des promesses dans l'API Fetch : pourquoi le comportement de .json() diffère

Lorsque vous travaillez avec l'API fetch(), une subtile différence de comportement apparaît lors de l'utilisation du . méthode json(). Ce comportement peut sembler contre-intuitif, alors examinons les raisons sous-jacentes.

Promise Nature of .json()

Par défaut, .json() renvoie une promesse qui résout la réponse JSON analysée corps. En effet, le corps de la réponse peut ne pas être immédiatement disponible, notamment pour les réponses volumineuses ou les connexions lentes. La promesse garantit que le code suivant ne s'exécutera pas tant que le JSON n'est pas entièrement analysé.

Chaînage de promesse et retour de valeur

Lorsque .json() est utilisé dans une chaîne .then(), il renvoie l'objet de promesse lui-même, permettant l'enchaînement d'opérations ultérieures. Cependant, lorsque .json() est renvoyé directement depuis le gestionnaire .then(), la valeur résolue de la promesse (le JSON analysé) est renvoyée à la place. En effet, le gestionnaire .then() s'attend à recevoir une valeur qui peut être manipulée davantage.

Exemple :

Dans l'extrait de code fourni :

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

La méthode .json() est chaînée dans un littéral d'objet, elle renvoie donc un objet de promesse, ce qui fait que l'attribut post.data est un Promesse.

Syntaxe alternative :

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

Dans cet exemple, .json() est renvoyé directement par le gestionnaire .then(), donc la valeur JSON résolue est immédiatement renvoyé, permettant un accès direct à l'attribut post.title.

Promise Chaining et Nested Promesses

Pour éviter la divergence entre les littéraux d'objet et les valeurs de retour directes, vous pouvez utiliser la syntaxe suivante :

fetch(url)
.then(response => 
    response.json().then(data => ({
        data: data,
        status: response.status
    })

Cette approche renvoie une promesse imbriquée qui se résout finalement en l'objet souhaité.

Conclusion

Le comportement promis de .json() dépend de la façon dont il est utilisé dans le code. Lors du chaînage des opérations, il renvoie un objet de promesse, garantissant ainsi un séquençage approprié. Cependant, lors du renvoi de .json() directement à partir d'un gestionnaire .then(), la valeur résolue (JSON analysé) est renvoyée, permettant une utilisation immédiate. Comprendre cette différence est crucial pour gérer les promesses et éviter les comportements inattendus dans votre code.

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!