Obtener un JSON desde JavaScript sin JQuery

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].