Las llamadas API son una parte clave del desarrollo web moderno. JavaScript ofrece varias formas de realizar esta tarea, cada una con sus propias ventajas y desventajas. Este artículo le presentará cuatro métodos principales para realizar llamadas API en JavaScript que puede utilizar en sus proyectos.

Solicitud XMLHttp (XHR)

XMLHttpRequest (XHR) es una forma tradicional de llamar a las API, compatible con todas las versiones del navegador. Este método es confiable y ampliamente utilizado, aunque su sintaxis a veces puede ser más difícil de leer y mantener.

const xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.example.com/data", true);
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
        if (xhr.status === 200) {
            console.log(JSON.parse(xhr.responseText)); // Parse and log the response data
        } else {
            console.error('Error:', xhr.statusText); // Log any errors
        }
    }
};
xhr.send();

Obtener API

Fetch API es una forma más moderna y sencilla de realizar llamadas API, basada en promesas. Admite operaciones asincrónicas y es fácil de ampliar mediante async y await.

fetch("https://api.example.com/data")
    .then(response => response.json())
    .then(data => console.log(data)) // Log the response data
    .catch(error => console.error('Error:', error)); // Log any errors

Usando async y await.

async function fetchData() {
    try {
        const response = await fetch("https://api.example.com/data");
        const data = await response.json();
        console.log(data); // Log the response data
    } catch (error) {
        console.error('Error:', error); // Log any errors
    }
}
fetchData();

axios

Axios es una biblioteca popular para solicitudes HTTP que proporciona una interfaz simple y consistente para realizar llamadas API. Primero debe instalarse usando npm o hilo.
npm instala axios
o
hilo agregar axios

Entonces puedes usar Axios para realizar llamadas API:

const axios = require('axios');

axios.get("https://api.example.com/data")
    .then(response => {
        console.log(response.data); // Log the response data
    })
    .catch(error => {
        console.error('Error:', error); // Log any errors
    });

Usando async y await:

async function fetchData() {
    try {
        const response = await axios.get("https://api.example.com/data");
        console.log(response.data); // Log the response data
    } catch (error) {
        console.error('Error:', error); // Log any errors
    }
}
fetchData();

jQuery AJAX

jQuery AJAX es un método para realizar llamadas API utilizando la biblioteca jQuery. Aunque jQuery se usa con menos frecuencia hoy en día, todavía aparece en proyectos más antiguos.

Foto fuente:
RAKOZY, Greg. Libros de diseño de sitios web. En línea. En: Unsplash. 2016. Disponible en: https://unsplash.com/photos/html-css-book-vw3Ahg4x1tY. [cit. 2024-07-16].