• +34 685 967 885
  • +34 695 898 191
  • antgarprats@gmail.com
  • Antonio García Prats

función fetch en JavaScript para obtener datos de una API

Obtener datos de una API

La función fetch en JavaScript para obtener datos de una API es una herramienta fundamental cuando queremos acceder a datos en internet desde nuestras aplicaciones web. Al trabajar en desarrollo web, uno de los objetivos más comunes es la comunicación entre el sitio web y servicios externos que proveen datos útiles, como los informes del clima, información de productos o el estado actual de noticias. fetch permite que JavaScript haga estas consultas de manera sencilla y eficiente, ayudándonos a crear aplicaciones más dinámicas e interactivas.

1. ¿Qué es la función fetch en JavaScript?

La función fetch en JavaScript para obtener datos de una API es una función que permite al navegador conectarse a un servidor externo para solicitar datos o enviar información. La función fetch devuelve un «objeto de promesa», lo cual significa que no recibimos los datos de inmediato, sino que estos llegan una vez que el servidor responde a nuestra solicitud.

2. ¿Qué es una promesa?

Las promesas en JavaScript son un tipo especial de objeto que representa una operación asíncrona. La característica clave de una promesa es que se ejecuta en segundo plano sin bloquear el flujo de la aplicación. Las promesas tienen tres estados:

Pendiente: cuando la operación aún no ha finalizado.

Resuelta: cuando la operación ha sido exitosa.

Rechazada: cuando ocurre algún error en la operación.

Cuando usamos fetch, recibimos una promesa que se resuelve una vez que el servidor ha respondido y se rechaza si hay un error en la solicitud.

3. Ejemplo básico de fetch en JavaScript para obtener datos de una API

Veamos un ejemplo sencillo de cómo usar la función fetch en JavaScript para obtener datos de una API. Utilizaremos una API pública gratuita que proporciona datos aleatorios de usuarios, llamada Random User API.

Código Ejemplo:

fetch('https://randomuser.me/api/')
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

Vamos a analizar cada línea del código para comprender su funcionamiento.

fetch('https://randomuser.me/api/'): Esta línea usa la función fetch en JavaScript para obtener datos de una API. En este caso, estamos solicitando datos al endpoint 'https://randomuser.me/api/', que generará información aleatoria de un usuario. Al ejecutarse, fetch inicia la solicitud y devuelve una promesa, la cual, si tiene éxito, permitirá que pasemos a los siguientes pasos.

.then(response => response.json()): Aquí utilizamos el método .then para manejar la respuesta del servidor, que en este caso se almacena en el objeto response. Dado que response no es legible en su formato inicial, usamos response.json() para transformar estos datos a un formato JSON que JavaScript pueda entender fácilmente. Esto también devuelve una nueva promesa que contiene los datos transformados.

.then(data => { console.log(data); }): En esta línea, usamos nuevamente .then para manipular los datos ya convertidos a JSON. La variable data contiene ahora los datos en un formato accesible y aquí simplemente los mostramos en la consola con console.log(data). Al ejecutarlo, deberíamos ver un objeto JSON que representa al usuario aleatorio que obtuvimos de la API.

.catch(error => { console.error('Error:', error); }): Para manejar posibles errores, agregamos el método .catch, el cual se ejecutará si algo falla durante el proceso. Por ejemplo, si no hay conexión a internet o el servidor está caído, se activará catch y mostrará un mensaje de error en la consola.

4. Explicación en contexto: ¿Cómo funciona la comunicación con una API?

Al ejecutar la función fetch en JavaScript para obtener datos de una API, estamos realizando lo que se conoce como una solicitud HTTP (Hypertext Transfer Protocol). Estas solicitudes pueden ser de varios tipos, siendo las más comunes las solicitudes de tipo GET y POST.

GET: Utilizada para pedir datos a un servidor, como en nuestro ejemplo con fetch. Es el tipo de solicitud más común cuando queremos «leer» datos.

POST: Utilizada para enviar datos al servidor, por ejemplo, al enviar un formulario.

La función fetch en JavaScript para obtener datos de una API nos permite hacer solicitudes GET de manera predeterminada. Sin embargo, si quisiéramos realizar una solicitud POST, podríamos hacerlo añadiendo algunos parámetros adicionales a fetch.

5. Ejemplo de solicitud POST con fetch para obtener datos de una API

Para ilustrar una solicitud de tipo POST, vamos a ver un código que envía un nombre de usuario y contraseña a una API de ejemplo.

fetch('https://example.com/api/login', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    username: 'usuarioEjemplo',
    password: 'contraseñaSegura'
  })
})
  .then(response => response.json())
  .then(data => {
    console.log('Éxito:', data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

Explicación de cada línea:

fetch('https://example.com/api/login', { ... }): En este caso, estamos haciendo una solicitud POST a una API ficticia que recibe datos de inicio de sesión. Además de la URL de la API, especificamos un objeto de configuración en el segundo argumento para personalizar la solicitud.

method: 'POST': Indicamos el método POST en la configuración para señalar que queremos enviar datos al servidor.

headers: { 'Content-Type': 'application/json' }: En esta sección, establecemos los encabezados de la solicitud, indicando que los datos que enviamos estarán en formato JSON.

body: JSON.stringify({ ... }): body es el contenido de la solicitud, que en este caso contiene el username y password. Para que el servidor entienda estos datos, los transformamos a una cadena de texto en formato JSON con JSON.stringify().

.then(response => response.json()) y .then(data => { ... }): Al igual que en el ejemplo anterior, convertimos la respuesta a formato JSON y luego mostramos los datos en la consola.

.catch(error => { console.error('Error:', error); }): Manejamos cualquier error en la solicitud con .catch.


La función fetch en JavaScript para obtener datos de una API es una herramienta poderosa y flexible para obtener y enviar información en internet desde nuestras aplicaciones web. La comprensión de las promesas y de cómo fetch maneja las respuestas asíncronas es esencial para trabajar de manera efectiva con APIs.

Te invito a que entres en mi blog para encontrar más tutoriales sobre programación web o, también, en el newsletter de mi página de linkedin.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *