Cómo hacer un fetch en JavaScript

Obtener datos con Fetch en JavaScript

Fetch API nos permite acceder a información que se sirven en endpoints de manera asíncrona sin necesidad de recargar la página en la que estamos.

Coloquialmente, en JavaScript se dice hacer fetch a «obtener unos datos» de una API o endpoint.

Para hacer un fetch en JavaScript se debe hacer como se explica en el código a continuación.

Lo primero de todo es tener un endpoint de la API a donde se van a consultar datos.

En el primer then se espera hasta obtener la respuesta del servidor, una vez se recibe la convertimos a formato json.

En el segundo then ya se tienen los datos, en el caso del código de ejemplo los pintamos con el console.log

Por último, si hubiera algún error lo capturamos en el catch y así lo mostramos.

¿Cómo saber si estoy haciendo bien un fetch?

En el caso del código de esta entrada, cópialo.

Ve a tu navegador y pulsa el botón derecho y pulsa en «inspeccionar».

Acude ahora a la opción de «consola» y pega ese código.

Ahora pulsa intro para lanzar la petición asíncrona y cuando el servidor obtenga los datos, te los devolverá (observa que va a tardar unos segundos).

Lo que hemos solicitado es un listado con las 10 últimas entradas de la página todocamarasdevigilancia.com

Todas las acciones o verbos de fetch

En este ejemplo hemos solicitado datos, que se trata del verbo «get», es decir, que cuando hacemos una petición GET lo que haremos es descargar datos.

Otras acciones habituales son:

Cómo usar Fetch con Async/Await

Si quieres encapsular el fetch en una función debes utilizar los términos de Async/Await.

El código resultante sería el siguiente:

Se trata de un código similar al anterior pero más «estructurado».

Lo primero es marcar a la función con el async, que es indicar que la función va a devolver algo en un periodo de tiempo que no conocemos (una promesa).

En la llamada al fetch usamos await, con el await se evita ir a la siguiente línea de código hasta que esa misma acabe y se obtenga la respuesta.

Una vez se tiene la respuesta, se debe procesar el json, bloqueando, nuevamente, con el await hasta que se obtengan todos los datos.

Por último, cuando la promesa ha acabado, es decir, se han obtenido todos los datos, estos se retornan.