Hoy dia una de las tareas mas habituales en una web es cargar datos desde algún api, tradicionalmente muchos desarrolladores lo hacían con JQuery gracias a lo sencillo que es realizarlas con dicha librería entre muchas otras cosas, sin embargo hay casos no se utiliza JQuery para nada más y no es muy eficiente cargar una librería completa solamente para hacer peticiones

¿Que alternativas tenemos? La alternativa mas simple es crear una funcion JavaScript que haga uso de una Promesa y XMLHttpRequest para realizar la petición HTTP, vamos como hacerlo:

Lo primero que debemos escribir una función para realizar la petición a la que llamaremos get_json y que será genérica y sirve para realizar una petición y devolver cualquier JSON como un objeto iterable, es decir ya parseado como JSON para que podamos recorrerlo y acceder a los datos como si fuera un array y no como un mero String:

const get_json = (url) =>; {
    return new Promise((resolve,reject) => {
    const xhttp = new XMLHttpRequest();
    xhttp.open('GET',url,true);
    xhttp.onreadystatechange = (() => {
        if (xhttp.readyState===4){
            (xhttp.status === 200)
                ? resolve(JSON.parse(xhttp.responseText))
                : reject(new Error('Error ',url))
            }
            });
        xhttp.send();
    });
}

La segunda función que debemos definir es específica para el JSON

const load_data  = async (url_api) => {
    try {
        const data = await get_json(url_api);
        
        //Aqui en la variable data ya tenemos el json completo
        //listo para realizar la tarea que queramos hacer.

    } catch (error) {
        console.error(error);
    }
}

Por último llamamos a la función pasándole la url del api, para hacerlo a modo de prueba usaremos el API de rickandmortyapi.com:

load_data('https://rickandmortyapi.com/api/character/')

A modo de ejemplo, al obtener el JSON vamos a recorrer y realizar una segunda petición para traernos el nombre del personaje, para eso realizamos un bucle for y luego llamamos nuevamente con la función get_json al endpoint del personaje mediante el id obtenido en la primera llamada.

const load_data  = async (url_api) =>; {
    try {
        const data = await get_json(url_api);
        var count = Object.keys(data.results).length;

        for(i=0; i <  count; i++) {
            let character = await get_json(`${url_api}${data.results[i].id}`);
            console.log(character.name)
        }

    } catch (error) {
        console.error(error);
    }
}

Como vemos, es sumamente sencillo y sin la necesidad de agregar ninguna librería externa, si quieres realizar mas pruebas con esta api puedes revisar la documentación [aqui].

Alvaro De León

Administrador de Sistemas, Programador, Docente y ahora resulta que también Blogger (peor es ser tictoker). Más de 20 años de experiencia en computación atendiendo nabos y resolviendo problemas que sino fuera por estos nabos no habrían ocurrido en primer lugar. Escribo más que nada sobre tecnología y herramientas en general además de algunos artículos con opiniones tan subjetivas como irrelevantes, así que si no te gustan mejor madura.