web-dev-qa-db-fra.com

récupérer response.json () et response.status

Est-ce la seule façon d'utiliser body.json () et d'obtenir le code d'état?

let status;

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

Cela ne fonctionne pas car il retourne une promesse dans le champ de réponse:

.then((response)=> {return {response: response.json(), status: response.status}})
javascriptpromisefetch
4
Guy

Votre statut n'est pas visible dans la seconde then. Vous pouvez simplement obtenir les deux propriétés dans la seule then.

json() vous renvoie une nouvelle promesse, vous devez donc créer votre objet dans la variable then du résultat de cette fonction. Si vous retournez une promesse d'une fonction, elle sera accomplie et renverra le résultat de l'accomplissement - dans notre cas, l'objet.

fetch("https://jsonplaceholder.typicode.com/posts/1")
.then(r =>  r.json().then(data => ({status: r.status, body: data})))
.then(obj => console.log(obj));

22
Suren Srapyan

J'ai été confronté exactement au même problème la semaine dernière. La méthode .json renvoie une promesse au JSON, pas au JSON lui-même. Si vous souhaitez accéder à la fois à la réponse et au JSON, vous devez utiliser des fermetures imbriquées comme ceci:

fetch(...)
    .then(response => {
        response.json().then(json => {
            // code that can access both here
        })
    })

Comme le rappel transmis à la promesse json a été créé dans le rappel à la promesse fetch, il aura également accès à la response.

Vous voudrez peut-être créer une fonction qui gère JSON et les cas d’erreur, puis la réutiliser pour tous vos extractions. Par exemple, quelque chose comme ceci:

function fetchHandler(response) {
    if (response.ok) {
        return response.json().then(json => {
            // the status was ok and there is a json body
            return Promise.resolve({json: json, response: response});
        }).catch(err => {
            // the status was ok but there is no json body
            return Promise.resolve({response: response});
        });

    } else {
        return response.json().catch(err => {
            // the status was not ok and there is no json body
            throw new Error(response.statusText);
        }).then(json => {
            // the status was not ok but there is a json body
            throw new Error(json.error.message); // example error message returned by a REST API
        });
    }
}
4
Jacque Goupil

Avez-vous essayé cela?

return fetch(url)
    .then((r)=> {return {response: r.json(), status: r.status}})
0
Drag13