Todo proyecto de programación, ya sea hecho por un completo novato o por el más experto, está sujeto a errores. En el desarrollo web, un proyecto puede colapsar por diversas razones que muchas veces no podemos controlar. Sin embargo, lo que sí podemos controlar es cómo reacciona nuestra página a dichas situaciones. En este post, te enseñaremos cómo controlar errores con Fetch para preparar nuestro frontend ante problemas con peticiones HTTP.
¿Qué es controlar errores con Fetch?
Fetch es un método disponible en JavaScript gracias al BOM, también conocido como el Browser Object Model, que nos permite hacer peticiones HTTP. En este sentido, Fetch es muy similar a la librería Axios para JavaScript, pues nos permite pedir datos a enlaces de una forma muy sencilla.
Al igual que cualquier herramienta que nos permite hacer peticiones HTTP, las peticiones HTTP con Fetch pueden llegar a tener errores. Esto nos abre la posibilidad de gestionar errores para darle algún feedback al usuario sobre lo que ha pasado con nuestra página.
En nuestro post sobre qué devuelve una petición HTTP con Fetch te contamos que una petición hecha con esta herramienta tiene varias propiedades. A la hora de controlar errores con Fetch, las propiedades que más nos interesan son ok y status. La primera nos dirá si la petición se ha ejecutado bien o no y la segunda nos dirá el estado de la petición (200, 404, etc.).
¿Cómo controlar errores con Fetch?
Para controlar errores con Fetch podemos utilizar la sintaxis de promesas o de funciones async. Es decir, podemos controlar errores con el método catch de las promesas o con la sentencia try…catch de las funciones asíncronas. Esto se da porque, como puedes leer en el artículo sobre el uso de Fetch en la página oficial de Mozilla Developer Network, el método fetch nos permite gestionar peticiones como procesos asíncronos. Es decir, nos devolverá una promesa.
Dentro de cualquier de estos métodos, podremos utilizar las propiedades ok y status para determinar la situación de un error y la reacción a esta.
Si tienes dudas sobre estas sintaxis que te comentamos, te invitamos a leer nuestros posts sobre la diferencia entre promesas y async y await, transformar promesas con async y await, y controlar errores con funciones async y await.
Entonces, supongamos que tenemos una sentencia try catch como la siguiente:
try {
response = await fetch (url);
} catch (error) {
console.log (error);
}
En las líneas de código anteriores simplemente estamos pintando el error en la consola. Ahora, para realmente controlar errores con Fetch, podríamos añadir una condición con la palabra clave if y las propiedades mencionadas anteriormente. Esto nos permitirá programar qué reacción debe tener nuestro proyecto cuando suceden determinados errores.
A continuación, te mostramos dos formas en las que podríamos acceder a las propiedades status y ok para determinar una condición.
Podríamos, por ejemplo, crear una condición en la que el status de nuestra petición (guardada en la variable response) sea igual a 404:
response.status === 404
También podríamos definir que la condición es que la propiedad ok sea falsa:
!response.ok
Entonces, podríamos usar esta última opción para hacer que, cuando esta propiedad sea falsa, se lance un mensaje de error como el siguiente:
if (!response.ok) {
throw new Error (‘Tweets no encontrados»)
}
La condición anterior puede insertarse fuera o dentro de la sentencia try catch. Esto dependerá de la lógica de tu proyecto y del momento exacto en el que quieras que se ejecute este mensaje de error. La verdad es que, en términos generales, mientras estas dos sentencias estén seguidas no importa mucho. Incluso te recomendamos dejar la sentencia if fuera para no anidar código innecesariamente.
¿Cuál es el siguiente paso?
Ahora que sabes cómo controlar errores con Fetch, ¡es momento de usar este conocimiento en tus propios proyectos! Por ello, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp, un espacio de formación intensiva donde aprenderás a desarrollar todo tipo de proyectos web con lenguajes de programación como JavaScript, HTML, CSS y JSX. ¿A qué esperas para dar este paso en tu formación? ¡Inscríbete ya!
