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.

Copiar

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.

Cómo hacer fetch en la consola de un navegador

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).

Resultados de hacer fetch en la consola de un navegador

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:

  • GET: Para recibir datos.

    Por ejemplo, el listado de usuarios dados de alta.

Copiar
  • POST: Para enviar datos (en el body de la petición) y que sean comprobados o añadidos a una base de datos.

    Por ejemplo, cuando se hace login a una web en el endpoint se envía el usuario y la contraseña para comprobar que los datos son correctos, en tal caso el servidor devuelve un OK o no.

Copiar
  • PUT o PATCH: Para actualizar o editar datos existentes.

    Por ejemplo, actualizar la contraseña de un usuario, en este caso del usuario con el identificador número 3.

Copiar
  • DELETE: Para borrar datos existentes.

    Por ejemplo, eliminar al usuario identificado con el código 2.

Copiar

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:

Copiar

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.

¡Valora este artículo y ayúdame a mejorar la calidad del blog, si no te ha servido, déjame un comentario para revisarlo!
(Votos: 0 Promedio: 0)