APIs en JavaScript

Una API (Interfaz de Programación de Aplicaciones) es un conjunto de definiciones y protocolos que permiten que las aplicaciones de software se comuniquen entre sí. En el contexto de JavaScript, las APIs proporcionan un medio para interactuar con el navegador web, servicios externos, y sistemas operativos, facilitando la adición de diversas funcionalidades en las aplicaciones web.

Fetch API

La Fetch API es una interfaz moderna que permite realizar solicitudes HTTP para obtener recursos de manera asíncrona. Es más versátil y flexible que el antiguo método XMLHttpRequest y se basa en promesas, lo que facilita el manejo de respuestas y errores.

Ejemplo de Fetch API

En este ejemplo, se realiza una solicitud GET a una API pública para obtener datos y manipularlos:

fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => {
    if (!
response.ok) {
      throw new Error('Error en la solicitud: ' + response.statusText);
    }
    return response.json();
  })
  .then(data => {
    console.log('Datos recibidos:', data);
  })
  .catch(error => {
    console.error('Error:', error);
  });
        

En este ejemplo, se verifica si la respuesta es correcta (código de estado 200) antes de convertirla a JSON y procesarla. En caso de error, se captura y muestra en la consola.

Geolocation API

La Geolocation API permite a las aplicaciones web acceder a la ubicación geográfica del usuario, siempre y cuando el usuario otorgue permiso. Es útil para aplicaciones que requieren ubicación, como mapas, aplicaciones de entrega o servicios de búsqueda local.

Ejemplo de Geolocation API

if ('geolocation' in navigator) {
  navigator.geolocation.getCurrentPosition(position => {
    console.log('Latitud:',
 position.coords.latitude);
    console.log('Longitud:', position.coords.longitude);
  }, error => {
    console.error('Error de geolocalización:', error.message);
  });
} else {
  console.log('La geolocalización no es compatible con este navegador.');
}
        

Este código primero verifica si la geolocalización es compatible con el navegador. Si es compatible, intenta obtener la posición actual del usuario. En caso de error o si la función no es compatible, muestra un mensaje correspondiente.

Web Storage API

La Web Storage API proporciona mecanismos para almacenar datos en el navegador, permitiendo que la información persista entre sesiones. Hay dos tipos principales de almacenamiento web: localStorage y sessionStorage. El localStorage almacena datos sin fecha de expiración, mientras que el sessionStorage almacena datos solo para la duración de la sesión de navegación.

Ejemplo de Web Storage API

Aquí se muestra cómo almacenar, recuperar y eliminar datos en localStorage:

// Guardar datos en localStorage
localStorage.setItem('usuario', 'Juan Pérez');

// Recuperar datos de localStorage
var usuario = localStorage.getItem('usuario');
console.log('Usuario:', usuario);

// Eliminar datos de localStorage
localStorage.removeItem('usuario');

// Verificar si los datos han sido eliminados
if (localStorage.getItem('usuario') === null) {
  console.log('El usuario ha sido eliminado de localStorage.');
}

En este ejemplo, se demuestra cómo se puede usar localStorage para almacenar, recuperar y eliminar datos. Además, se muestra cómo verificar si un ítem ha sido eliminado del almacenamiento local.

API de Notificaciones

La API de Notificaciones permite a las aplicaciones web enviar notificaciones al escritorio del usuario, incluso cuando la aplicación no está activa. Esto es útil para alertar a los usuarios sobre mensajes nuevos, actualizaciones importantes u otros eventos.

Ejemplo de API de Notificaciones

En este ejemplo, se solicita permiso al usuario para enviar notificaciones y luego se muestra una notificación simple:

if ('Notification' in window && Notification.permission !== 'denied') {
  Notification.requestPermission().then(permission => {
    
if (permission === 'granted') {
      new Notification('Hola!', {
        body: '¡Gracias por permitir las notificaciones!',
        icon: 'icono.png'
      });
    }
  });
}

        

Este código verifica si el navegador admite notificaciones y si el usuario no ha denegado el permiso previamente. Si es así, solicita permiso para enviar notificaciones y muestra una notificación simple en el escritorio.