fetch: rejeter la promesse avec l'objet d'erreur JSON

Question

J'ai une API HTTP qui renvoie des données JSON à la fois en cas de succès et en cas d'échec.

Un échec exemple ressemblerait à ceci:

~ ◆ http get http://localhost:5000/api/isbn/2266202022 
HTTP/1.1 400 BAD REQUEST 
Content-Length: 171 
Content-Type: application/json 
Server: TornadoServer/4.0 

{ 
    "message": "There was an issue with at least some of the supplied values.", 
    "payload": { 
     "isbn": "Could not find match for ISBN." 
    }, 
    "type": "validation" 
} 

Ce que je veux réaliser dans mon code JavaScript est quelque chose comme ceci:

fetch(url) 
    .then((resp) => { 
    if (resp.status >= 200 && resp.status < 300) { 
     return resp.json(); 
    } else { 
     // This does not work, since the Promise returned by `json()` is never fulfilled 
     return Promise.reject(resp.json()); 
    } 
    }) 
    .catch((error) => { 
    // Do something with the error object 
    } 

Answer 1

// This does not work, since the Promise returned by `json()` is never fulfilled 
return Promise.reject(resp.json()); 

Eh bien, la resp.json promesse sera être remplies, seulement Promise.reject n'attend pas et rejette immédiatement avec une promesse.

Je suppose que vous voulez plutôt faire ce qui suit:

fetch(url).then((resp) => { 
    let json = resp.json(); // there's always a body 
    if (resp.status >= 200 && resp.status < 300) { 
    return json; 
    } else { 
    return json.then(Promise.reject.bind(Promise)); 
    } 
}) 

(ou, écrit explicitement)

return json.then(err => {throw err;}); 

Answer 2

Voici une approche un peu plus propre qui repose sur response.ok et utilise les données JSON sous-jacentes au lieu du Promise renvoyé par .json().

function myFetchWrapper(url) { 
 
    return fetch(url).then(response => { 
 
    return response.json().then(json => { 
 
     return response.ok ? json : Promise.reject(json); 
 
    }); 
 
    }); 
 
} 
 

 
// This should trigger the .then() with the JSON response, 
 
// since the response is an HTTP 200. 
 
myFetchWrapper('http://api.openweathermap.org/data/2.5/weather?q=Brooklyn,NY').then(console.log.bind(console)); 
 

 
// This should trigger the .catch() with the JSON response, 
 
// since the response is an HTTP 400. 
 
myFetchWrapper('https://content.googleapis.com/youtube/v3/search').catch(console.warn.bind(console));