Puis-je d'une manière ou d'une autre obtenir la réponse fetch dans le premier `then`?

Question

Je suis en train d'essayer d'utiliser l'API Fetch. Il semble, d'après les exemples, qu'une requête GET nécessite un then pour analyser la réponse d'une manière ou d'une autre.

Actuellement, je fais ceci

fetch(url)
    .then(response => response.json())
    .then(response => {
        console.log(response);  
    });

Cependant, ce premier then semble être un modèle récurrent. J'ai essayé de l'éviter, par exemple:

fetch(url)
    .then(response => {
        console.log(response.json());  
    });

Mais cela me génère une Promise en attente avec un statut resolved.

J'ai lu d'autres questions sur ce sujet et j'ai un peu compris les promesses, mais je n'ai pas pu comprendre s'il était possible de les combiner en un seul then (si oui - comment?) ou non.

Par exemple, deux des réponses ici soulignent que

Il n'est pas nécessaire d'utiliser plus d'un '.then'

et

il n'y a pas de bonne raison d'avoir deux gestionnaires .then() car le code de chacun aurait pu être combiné dans un seul gestionnaire .then()

Mais je n'ai pas réussi à faire fonctionner cet exemple - j'ai quand même obtenu une promesse :)

En revanche, la réponse acceptée ici explique que .then fait en réalité quelque chose au résultat (extrait le retourné de la promesse), mais je n'ai pas compris si je pouvais le faire moi-même d'une manière ou d'une autre, par exemple response.json().then() ou response.json().getVal() ou si la syntaxe double-then est la seule façon de le faire.

Answer 1

C'est assez simple: lorsque vous envoyez une requête fetch(), elle renvoie une promesse contenant la réponse. Cette promesse est résolue par le premier .then(). En résolvant cette première promesse, vous obtenez en réalité Response.

Maintenant, voici la partie délicate: les méthodes qui lisent le corps de la réponse, que ce soit .json(), .text(), .blob().... retournent toutes des promesses. Cela signifie que vous devrez résoudre la deuxième promesse pour obtenir la réponse analysée.

Le processus se présente ainsi :

1. Envoyer une requête fetch(), et cela retourne une promesse de type Response
2. Lorsque vous essayez de résoudre le contenu de la réponse, cela renverra une deuxième promesse, dont le type dépend de la méthode que vous utilisez (par exemple, .json() renvoie un objet, .text() renvoie une chaîne de caractères, .blob() renvoie un Blob).
3. Résoudre la deuxième promesse, et vous obtenez le corps de votre réponse analysée.

Answer 2

La première promesse retournée par fetch peut être utile dans certains cas. Si vous voulez éviter le code superflu, vous pourriez simplement créer votre propre fonction :

function fetch_json(url, opts) {
    return fetch(url, opts)
        .then(resp => resp.json());
}

fetch_json(votre_url)
    .then(json => console.log(json));

Answer 3

En ce moment, j'utilise la syntaxe async/await qui est la même chose, mais semble moins être un code de base pour moi.

const response = await fetch(url)
const data = await response.json()

console.log(data)