Manejo de errores al utilizar fetch

Un error común entre los desarrolladores es asumir que fetch hará un promise reject al recibir un status de error de HTTP. Para fetch, solo hace un reject cuando exista un error en la red. Si el servidor está trabajando de manera correcta nos responderá la petición realizada, así sea con un status 400 o 500 y fetch lo tomará como promise resolve. Fetch puede funcionar con solo un parámetro, la url:

let url = 'http://someURL.com' ;

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

Sin embargo, es común olvidar agregar las credenciales o el Content-Type, para ello podemos enviar dos parámetros url y request:

let headers = new Headers();
headers.append('Content-Type', 'application/json');

let request = {
       headers,
       method:'POST',
       body: '{"foo":"bar"}' 
}

let url = 'http://someURL.com'; 
fetch(url,request).then(response => console.log(response));

Ahora veamos como manejar los errores. Response tiene varias propiedades y nosotros utilizaremos Response.ok y Response.status. La manera fácil y rápida es utilizar la propiedad Response.ok que será true solo en los status del rango 200-299:

fetch(request)
  .then(response => {
      if (!response.ok) throw Error(response.status);

      return response;
  })
  .then(response => console.log("ok"))
  .catch(error => console.log(error));

Para hacer nuestro código reutilizable dividiremos las funciones:

const handleError = (response) => {
   if (!response.ok) throw Error(response.status);
   return response;
}

const handledFetch = (request) => {
   return fetch(request)
     .then(handleError)
}

De esta manera podemos utilizar nuestra función desde cualquier parte de la aplicación:

const apiGetSomething = () => {
let headers= new Headers();
headers.append('Content-Type', 'application/json');

const request = new Request('http://webapi.com', 
{  method: 'POST',  body: '{"foo":"bar"}' , headers });

return handledFetch(request)
.then(response => response.json())
};

El hecho de que fetch no maneje los errores es de cierta manera una ventaja para los programadores que les gusta tener más control sobre su código ya que con fetch tenemos la oportunidad de decidir cómo lidiar con los problemas.