JavaScript: gestire gli errori nelle richieste HTTP con le Fetch API

In questo articolo vedremo come gestire gli errori nelle richieste HTTP con le Fetch API di JavaScript.

Per ottenere risultati coerenti occorre interrogare la proprietà ok dell'oggetto Response e verificare che il valore sia impostato su true. La Promise restituita da fetch() infatti è sempre sullo stato resolved a prescindere dall'esito della richiesta HTTP.

fetch('https://api.site.tld/posts').then(resp => {
    if(!resp.ok) {
        throw { httpError: response.status };
    }
    return resp,json();
}).then(data => console.log(data))
.catch(err => console.log(err)); 

Quando solleviamo l'eccezione nel caso in cui la risposta restituisca un codice di stato HTTP diverso dal range 2xx, l'errore viene gestito dal blocco catch specificato alla fine. Al contrario, se la risposta non ha restituito un errore HTTP, restituiamo l'output JSON che verrà gestito dal secondo blocco then.