Cómo llamar a una API en JavaScript – con ejemplos

Cómo llamar a una API en JavaScript - con ejemplos

Llamar a una API (Interface de Programación de Aplicaciones) en JavaScript es una acción fundamental que los desarrolladores web necesitan saber cómo realizar. Esto te permite obtener datos de fuentes externas e integrarlos en tus aplicaciones web.

En este tutorial, te guiaré paso a paso a través del proceso de realizar llamadas a API en JavaScript. Al final de este artículo, tendrás una comprensión sólida de cómo interactuar con las APIs en tus proyectos de JavaScript.

Tabla de contenidos:

¿Qué es una API?

Antes de sumergirnos en los detalles técnicos de cómo llamar a una API en JavaScript, comencemos con lo básico. Una API, o Interface de Programación de Aplicaciones, es como un puente que permite que dos sistemas de software diferentes se comuniquen entre sí. Define un conjunto de reglas y protocolos para solicitar e intercambiar datos.

Las APIs se pueden utilizar para recuperar información de fuentes externas, enviar datos a servicios externos o realizar diversas acciones. Son ampliamente utilizadas en el desarrollo web para acceder a datos de diversos servicios en línea, como plataformas de redes sociales, datos meteorológicos, información financiera y más.

Cómo elegir una API

El primer paso para llamar a una API es elegir la que se adapte a tus necesidades. Hay innumerables APIs disponibles, que proporcionan datos sobre una amplia gama de temas.

Algunos de los tipos populares de APIs incluyen:

APIs RESTful: Ampliamente utilizadas para la recuperación y manipulación de datos simples. Utilizan métodos HTTP estándar como GET, POST, PUT y DELETE.
APIs de terceros: Muchos servicios en línea ofrecen APIs que te permiten acceder a sus datos, como la API de Twitter para tweets o la API de Google Maps para datos de ubicación.
APIs de clima: Si necesitas datos meteorológicos, APIs como OpenWeatherMap o WeatherAPI son buenas opciones.
APIs financieras: Para obtener datos financieros como precios de acciones, puedes usar APIs como Alpha Vantage o Yahoo Finance.

Para esta guía, utilizaremos una API RESTful ficticia como ejemplo para mantener las cosas simples. Puedes reemplazarla con la API de tu elección.

Cómo usar la Fetch API para solicitudes GET

Para realizar solicitudes a una API en JavaScript, puedes utilizar la API fetch, que está integrada en los navegadores modernos. Es una API basada en promesas que facilita el envío de solicitudes HTTP y el manejo de respuestas de forma asíncrona.

Así es como se hace una solicitud GET utilizando fetch:

// Define la URL de la APIconst apiUrl = 'https://api.ejemplo.com/datos';// Realiza una solicitud GETfetch(apiUrl)  .then(response => {    if (!response.ok) {      throw new Error('La respuesta de la red no fue válida');    }    return response.json();  })  .then(data => {    console.log(data);  })  .catch(error => {    console.error('Error:', error);  });

En el código anterior:

Definimos la URL de la API que queremos llamar.
Usamos la función fetch para hacer una solicitud GET a la URL de la API. La función fetch devuelve una promesa.
El método .then() maneja la respuesta asíncrona del servidor.
Se verifica la propiedad response.ok para asegurarse de que la respuesta sea válida.
Analizamos los datos JSON utilizando el método response.json().
Finalmente, registramos los datos en la consola o manejamos cualquier error que pueda ocurrir.

Cómo manejar las respuestas

Cuando realizas una llamada a una API, el servidor responde con datos. Cómo manejes estos datos depende de los requisitos de tu aplicación. En el ejemplo anterior, simplemente registramos los datos en la consola. Sin embargo, puedes procesar los datos de varias formas, como mostrarlos en una página web o almacenarlos en una base de datos.

Aquí tienes un ejemplo modificado que muestra los datos de la API en un elemento HTML:

const apiUrl = 'https://api.example.com/data';const outputElement = document.getElementById('output');fetch(apiUrl)  .then(response => {    if (!response.ok) {      throw new Error('La respuesta de la red no fue válida');    }    return response.json();  })  .then(data => {    // Mostrar datos en un elemento HTML    outputElement.textContent = JSON.stringify(data, null, 2);  })  .catch(error => {    console.error('Error:', error);  });

En este ejemplo, utilizamos la variable outputElement para seleccionar un elemento HTML donde queremos mostrar los datos. La propiedad textContent se utiliza para actualizar el contenido de ese elemento con los datos JSON.

Manejo de errores en las llamadas a la API

El manejo de errores es una parte esencial de realizar llamadas a API en JavaScript. Las solicitudes a API pueden fallar por diversas razones, como problemas de red, problemas del servidor o URLs incorrectas.

En nuestros ejemplos anteriores, utilizamos el manejo de errores basado en promesas de fetch para capturar y manejar los errores.

Además del bloque catch, también puedes verificar el código de estado HTTP utilizando response.status para determinar la naturaleza del error. Así es cómo puedes hacerlo:

const apiUrl = 'https://api.example.com/data';fetch(apiUrl)  .then(response => {    if (!response.ok) {      if (response.status === 404) {        throw new Error('Datos no encontrados');      } else if (response.status === 500) {        throw new Error('Error del servidor');      } else {        throw new Error('La respuesta de la red no fue válida');      }    }    return response.json();  })  .then(data => {    outputElement.textContent = JSON.stringify(data, null, 2);  })  .catch(error => {    console.error('Error:', error);  });

En este ejemplo, verificamos códigos de estado HTTP específicos (como 404 y 500) y proporcionamos mensajes de error más descriptivos. Puedes personalizar el manejo de errores según las necesidades de tu aplicación.

Cómo realizar solicitudes POST

Hasta ahora, nos hemos centrado en realizar solicitudes GET, que se utilizan para obtener datos de una API. Pero es posible que también necesites enviar datos a una API, lo cual puedes hacer utilizando solicitudes POST.

Así es cómo hacer una solicitud POST simple utilizando fetch:

const apiUrl = 'https://api.example.com/data';const data = {  name: 'John Doe',  email: '[email protected]',};const requestOptions = {  method: 'POST',  headers: {    'Content-Type': 'application/json',  },  body: JSON.stringify(data),};fetch(apiUrl, requestOptions)  .then(response => {    if (!response.ok) {      throw new Error('La respuesta de la red no fue válida');    }    return response.json();  })  .then(data => {    outputElement.textContent = JSON.stringify(data, null, 2);  })  .catch(error => {    console.error('Error:', error);  });

En este ejemplo:

Definimos la URL de la API y los datos que queremos enviar como un objeto.
Creamos un objeto requestOptions que especifica el método (POST), el tipo de contenido (application/json) y los datos que se enviarán en formato JSON.
Pasamos el objeto requestOptions a la función fetch.

El resto del código es similar a nuestros ejemplos anteriores, con el manejo de errores y el procesamiento de datos.

Cómo trabajar con claves de API

Muchas APIs requieren autenticación a través de claves de API para garantizar que solo los usuarios autorizados puedan acceder a sus datos. Cuando trabajas con APIs que requieren claves de API, necesitas incluir la clave en tus solicitudes.

Aquí tienes un ejemplo de cómo incluir una clave de API en una solicitud:

const apiKey = 'tu_clave_de_api_aquí';const apiUrl = 'https://api.example.com/data';const requestOptions = {  method: 'GET',  headers: {    'Authorization': `Bearer ${apiKey}`,  },};fetch(apiUrl, requestOptions)  .then(response => {    if (!response.ok) {      throw new Error('La respuesta de la red no fue válida');    }    return response.json();  })  .then(data => {    outputElement.textContent = JSON.stringify(data, null, 2);  })  .catch(error => {    console.error('Error:', error);  });

En este ejemplo, definimos una variable apiKey y la incluimos en las headers del objeto requestOptions con el prefijo “Bearer”. Asegúrate de reemplazar 'tu_clave_api_aquí' con tu API key real.

JavaScript Asíncrono

Las llamadas a la API son típicamente asíncronas, lo que significa que no bloquean la ejecución de tu código mientras esperan una respuesta. Esto es importante porque permite que tu aplicación web siga siendo receptiva incluso cuando se trata de solicitudes de red potencialmente lentas.

Para manejar operaciones asíncronas, usamos promesas y el método .then() para especificar qué debe suceder cuando se complete la operación. Esto permite que el hilo principal de tu aplicación JavaScript siga ejecutando otras tareas mientras espera la respuesta de la API.

Aquí hay un resumen de cómo funciona el JavaScript asíncrono:

Cuando llamas a fetch, se inicia una operación asíncrona y devuelve una promesa de inmediato.

Usas el método .then() para adjuntar funciones que deben ejecutarse cuando la promesa se resuelva exitosamente (con una respuesta) o falle (con un error).

Cualquier código fuera de los bloques .then() puede seguir ejecutándose mientras la llamada a la API está en progreso.

Este comportamiento asíncrono ayuda a garantizar que tu aplicación siga siendo receptiva y no se quede congelada mientras espera los datos.

Ejemplos del Mundo Real de Llamadas a la API

Ahora que hemos cubierto los conceptos básicos de cómo hacer llamadas a la API en JavaScript, exploremos un par de ejemplos del mundo real para ver cómo se puede aplicar este conocimiento en la práctica.

Ejemplo 1: Obtención de Datos Meteorológicos

En este ejemplo, usaremos la API OpenWeatherMap para obtener datos meteorológicos de una ubicación específica. Puedes registrarte para obtener una clave API gratuita en su sitio web.

Así es como puedes hacer una solicitud GET para obtener los datos meteorológicos y mostrarlos en una página web:

const apiKey = 'tu_clave_api_openweathermap';const apiUrl = `https://api.openweathermap.org/data/2.5/weather?q=London&appid=${apiKey}`;const outputElement = document.getElementById('weather-output');fetch(apiUrl)  .then(response => {    if (!response.ok) {      throw new Error('La respuesta de la red no fue correcta');    }    return response.json();  })  .then(data => {    const temperature = data.main.temp;    const description = data.weather[0].description;    const location = data.name;    outputElement.innerHTML = `<p>Temperatura en ${location}: ${temperature}°C</p>                               <p>Clima: ${description}</p>`;  })  .catch(error => {    console.error('Error:', error);  });

En este ejemplo, realizamos una solicitud GET a la API de OpenWeatherMap, pasamos la clave API como parámetro en la URL y mostramos la temperatura y la descripción del clima en una página web.

Ejemplo 2: Enviar un Formulario a un Servidor

Supongamos que tienes un formulario de contacto simple en tu sitio web y quieres enviar los datos del formulario a un servidor para su procesamiento. Así es como puedes hacer una solicitud POST para enviar los datos del formulario a un servidor:

HTML:

<form id="contact-form">  <input type="text" name="name" placeholder="Nombre">  <input type="email" name="email" placeholder="Email">  <textarea name="message" placeholder="Mensaje"></textarea>  <button type="submit">Enviar</button></form><div id="response-message"></div>

JavaScript:

const apiUrl = 'https://api.example.com/submit';const contactForm = document.getElementById('contact-form');const responseMessage = document.getElementById('response-message');contactForm.addEventListener('submit', function (event) {  event.preventDefault();  const formData = new FormData(contactForm);  const requestOptions = {    method: 'POST',    body: formData,  };  fetch(apiUrl, requestOptions)    .then(response => {      if (!response.ok) {        throw new Error('La respuesta de la red no fue correcta');      }      return response.text();    })    .then(data => {      responseMessage.textContent = data;    })    .catch(error => {      console.error('Error:', error);    });});

En este ejemplo, escuchamos el evento de envío del formulario, prevenimos el envío predeterminado del formulario y usamos FormData para serializar los datos del formulario. Luego, realizamos una solicitud POST al servidor, enviamos los datos del formulario y mostramos la respuesta del servidor.

Conclusión

Llamar a una API en JavaScript es una habilidad valiosa para los desarrolladores web, lo que te permite acceder a una gran cantidad de datos y servicios para mejorar tus aplicaciones web.

En esta guía completa, hemos cubierto los conceptos y técnicas esenciales, incluyendo realizar solicitudes GET y POST, manejar respuestas y errores, y trabajar con claves de API. También has visto dos ejemplos prácticos que demuestran cómo obtener datos meteorológicos y enviar datos de formulario a un servidor.

A medida que continúes trabajando con APIs en tus proyectos, te encontrarás con diferentes APIs con sus requisitos y documentación única. Recuerda que las APIs pueden tener límites de velocidad, políticas de uso y restricciones, así que siempre revisa la documentación de la API para asegurarte de que la estás utilizando correctamente y de manera responsable.

Con los conocimientos adquiridos en esta guía, estarás bien preparado para interactuar con APIs en tus aplicaciones de JavaScript, lo que te permitirá crear experiencias web dinámicas y ricas en datos. ¡Feliz codificación!