¿Qué es una API y cómo interactuamos con ella?

En el desarrollo web, las APIs permiten que tu código JavaScript interactúe con servicios externos, como obtener datos de un servidor, enviar datos de formularios o integrar servicios de terceros.

En aplicaciones modernas de JavaScript, las APIs se utilizan frecuentemente para:

• Obtener datos de un servidor (por ejemplo, recuperar datos meteorológicos, artículos de noticias o detalles de productos);
• Enviar datos a un servidor (por ejemplo, enviar un formulario o guardar preferencias de usuario);
• Trabajar con servicios de terceros (por ejemplo, Google Maps, API de Twitter, pasarelas de pago).

Interactuamos con las APIs enviando solicitudes HTTP a un endpoint de la API, y el servidor responde con datos, normalmente en formato JSON.

Envío de solicitudes HTTP usando fetch()

La función fetch() es una forma moderna de realizar solicitudes de red en JavaScript. Devuelve una Promesa, que se resuelve cuando la solicitud se completa.

Este ejemplo ilustra cómo realizar una solicitud HTTP GET a una API utilizando fetch(). La función fetchData envía una solicitud al endpoint especificado (https://jsonplaceholder.typicode.com/posts/1). Una vez que se recibe la respuesta, response.json() analiza los datos JSON. El título de la publicación se extrae de los datos analizados y se muestra en el párrafo HTML.

Manejo de respuestas de API: Analizar JSON y verificar el estado de la respuesta

Después de enviar una solicitud a una API, es importante comprobar si la solicitud fue exitosa y manejar la respuesta adecuadamente. En la mayoría de los casos, los datos devueltos por una API están en formato JSON, por lo que es necesario analizarlos utilizando response.json().

Además, siempre se debe verificar el estado de la respuesta para asegurar que la solicitud fue exitosa (código de estado 200–299).

Este ejemplo demuestra cómo manejar el estado de la respuesta de una solicitud a una API. La función fetchAndCheckStatus envía una solicitud a un endpoint de API y luego verifica si la respuesta es exitosa utilizando response.ok, que devuelve true para los códigos de estado en el rango 200–299. Si la solicitud es exitosa, los datos JSON se analizan y se muestran. Si la solicitud falla, el código de estado de error se muestra en el HTML.

Manejo de errores con APIs y gestión de fallos de red

Al trabajar con APIs, es fundamental manejar posibles errores como:

• Fallos de red: El servidor puede no estar disponible debido a problemas de red;
• Respuestas no válidas: La API puede devolver un error (por ejemplo, 404 Not Found o 500 Server Error).

Se pueden manejar los errores utilizando try...catch junto con fetch() para gestionar tanto los errores de red como los errores de respuesta de la API.

Este ejemplo muestra cómo manejar errores de API de manera efectiva. La función fetchWithErrorHandling utiliza try...catch para gestionar tanto errores de red como respuestas inválidas de la API. Si la solicitud a la URL inválida falla, o si el código de estado de la respuesta está fuera del rango 200–299, se lanza un error con un mensaje específico. El bloque catch luego muestra el mensaje de error en el HTML. Este método asegura que cualquier problema con la llamada a la API, como un endpoint incorrecto o problemas de conectividad, se gestione de forma adecuada y se comunique claramente al usuario.