APIs REST: cómo consumirlas con JavaScript y fetch

Las APIs REST (Interfaz de Programación de Aplicaciones basada en Transferencia de Estado Representacional) son un conjunto de reglas que permiten que diferentes aplicaciones se comuniquen entre sí a través de la web. En el mundo de la programación, especialmente en aplicaciones web, es fundamental saber cómo consumir estas APIs para obtener o enviar datos de manera eficiente.

Una de las formas más modernas y sencillas de interactuar con APIs REST en JavaScript es mediante el uso de la función fetch. Esta función permite realizar solicitudes a servidores de manera asíncrona, facilitando la obtención de datos sin necesidad de recargar la página. En este artículo, aprenderemos cómo utilizar fetch para consumir APIs REST y hacer que nuestras aplicaciones sean más dinámicas y funcionales.

Explicación

Las APIs REST funcionan a través de métodos HTTP como GET, POST, PUT y DELETE. Cada uno de estos métodos tiene un propósito específico: GET se utiliza para obtener datos, POST para enviar datos, PUT para actualizar datos y DELETE para eliminarlos. La comunicación se realiza a través de URLs que representan recursos específicos.

Para consumir una API REST, JavaScript ofrece la función fetch, que retorna una Promise. Esto significa que podemos manejar la respuesta de manera asíncrona, permitiendo a nuestra aplicación continuar ejecutándose mientras espera los datos. La estructura básica de un llamado a una API usando fetch es:

fetch('URL_DE_LA_API')
  .then(respuesta => respuesta.json())
  .then(datos => console.log(datos))
  .catch(error => console.error('Error:', error));

En esta estructura, primero hacemos la solicitud a la API y luego convertimos la respuesta en formato JSON, que es el formato más común para enviar datos. Finalmente, manejamos los datos o errores que puedan surgir. Este enfoque permite crear aplicaciones web interactivas y eficientes.

Ejemplos paso a paso

1. Ejemplo 1: Obtener datos de una API pública
   1. Selecciona una API pública, como JSONPlaceholder.
   2. Usa fetch para hacer una solicitud GET a la URL: https://jsonplaceholder.typicode.com/posts.
   3. Convierte la respuesta a JSON y muestra los datos en la consola.
2. Ejemplo 2: Enviar datos a una API
   1. Usa la misma API y crea un objeto con datos que quieras enviar:

   const nuevoPost = { title: 'Hola', body: 'Este es un nuevo post', userId: 1 };

   2. Utiliza fetch con el método POST para enviar el objeto a https://jsonplaceholder.typicode.com/posts.
   3. Muestra la respuesta en la consola.
3. Ejemplo 3: Manejar errores al consumir una API
   1. Realiza una solicitud a una URL incorrecta.
   2. Agrega un catch para manejar el error y mostrar un mensaje en la consola.
   3. Prueba diferentes tipos de errores para ver cómo se manejan.

Ejercicios básicos para practicar

1. Realiza una solicitud GET a https://jsonplaceholder.typicode.com/users y muestra los nombres de los usuarios.
2. Crea un objeto y envíalo a https://jsonplaceholder.typicode.com/posts usando el método POST.
3. Haz una solicitud GET a una URL que no existe y maneja el error.

Errores frecuentes

• No manejar las Promises: Asegúrate de usar then y catch para manejar la respuesta y errores.
• Olvidar el encabezado Content-Type: Cuando envíes datos en formato JSON, siempre incluye { 'Content-Type': 'application/json' } en los encabezados.
• Confundir métodos HTTP: Asegúrate de usar el método correcto (GET, POST, etc.) según lo que necesites hacer.

Preguntas frecuentes

¿Qué es una API REST?

Una API REST es un conjunto de reglas que permite la comunicación entre diferentes sistemas a través de HTTP utilizando métodos como GET, POST, PUT y DELETE.

¿Qué es fetch en JavaScript?

fetch es una función en JavaScript que permite realizar solicitudes a recursos de red y manejar sus respuestas de forma asíncrona.

¿Cómo manejo errores al consumir una API?

Utiliza el método catch para manejar errores en las promesas al consumir una API con fetch.