¿Cómo crear peticiones asíncronas con Javascript?

Hace un par de días llegó a CódigoFacilito una pregunta acerca de web. La pregunta iba algo por el estilo. Con input, ¿Cómo puedo llamar a una función en Go cuando se haga clic sobre un botón y de esta forma pintar el resultado en pantalla?, en otras palabras, lo que se desea es un buscador simple, un buscador que no necesite recargar la página para mostrar el resultado.

Lo primero que se vino a mi mente fue, utiliza Ajax, sin embargo, después de un par de segundos caí en cuenta que existen diferentes formas en las cuales desde el cliente, con Javascript, es posible realizar peticiones a un servidor. Así que me di a la tarea de escribir este pequeño post para todas aquellas personas que se encuentran comenzando con el desarrollo web, esto con la finalidad que tengan un panorama más amplio y sepan elegir qué forma se adapta mejor a sus necesidades; Espero les sea de ayuda. 🦕

Para este post estaré utilizando el API de Star Wars, te dejo el link para que te familiarices con la respuesta.

Ajax

Ajax, Asynchronous JavaScript And XML, es quizás, la forma más convencional y con la que muchos aprendimos a realizar peticiones al servidor de forma asíncrona. Para utilizar Ajax será necesario definir cuatro pasos en nuestro proyecto.

• Lo primero será crear una instancia de XMLHttpRequest()
• Una vez con la instancia, definimos a qué dirección y bajo qué método del protocolo HTTP trabajaremos. En este caso como queremos obtener algo del servidor haremos uso de GET (También es posible utilizar POST).
• El tercer paso será definir una función para el atributo onreadystatechange. Esta función nos permitirá conocer el estatus de la petición y si la respuesta por parte del servidor fue exitosa o no.
• El último paso será realizar la petición utilizando el método send.

const url = 'https://swapi.co/api/people/1/'
const http = new XMLHttpRequest()

http.open("GET", url)
http.onreadystatechange = function(){

    if(this.readyState == 4 && this.status == 200){
        var resultado = JSON.parse(this.responseText)
        console.log(resultado.name)
    }
}
http.send()

En este caso realizamos una condición dentro de nuestra función para conocer si la petición a finalizado de forma exitosa. El atributo readyState tiene cinco posibles estatus. Te comparto el link de la documentación para que le eches un ojo.

Algo importante a mencionar es que la respuesta se nos dada mediante un string, es por ello que debemos convertir esto a una estructura Json.

 JSON.parse(this.responseText)

Jquery y Ajax

Como vimos, utilizar Ajax es relativamente sencillo, sin embargo, existe una forma aún más sencilla, y esto es utilizando la librería de Jquery. Recuerdo que en la universidad utilizaba única y exclusivamente Jquery para implementar Ajax, algo que ahora no recomiendo.

En su momento me apoye mucho de un vídeo en CódigoFacilito. No les miento, ese vídeo estaba entre mis marcadores del navegador.

Podemos utilizar esta librería mediante CDN.

<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>

$( document ).ready(function() {

    $.ajax({
        url: 'https://swapi.co/api/people/1/',
        type: 'GET',
        success: function(respuesta) {
            console.log(respuesta.name);
        },
        error: function() {
            console.error("No es posible completar la operación");
        }
    });

});

Get

El método get nos permitirá realizar una peticiones Get. Este método recibe dos argumentos, el primero será la dirección a la cual queremos consultar, el segundo argumento será una función que posea dos parámetros; El primer parámetro hace referencia a la respuesta por parte del servidor, por otro lado, el segundo parámetros nos permitirá conocer el estatus de la petición.

<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>

$( document ).ready(function() {
    const url = 'https://swapi.co/api/people/1/'

    $.get(url, function(respuesta, status){
        if (status == 'success'){
            console.log(respuesta.name)
        }
    })
});

Axios

Axios es una librería open source bastante cool, la cual nos permite realizar peticiones asíncronas a través de promesas. Si no sabes que es una promesa, no te preocupes, tenemos un

" target="_blank">taller en donde te lo explicamos a fondo. 😉

Podemos utilizar esta librería mediante CDN.

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

const url = 'https://swapi.co/api/people/1/'

axios.get(url)
.then(respuesta => respuesta.data )
.then(data => console.log(data.name) )

Este es un ejemplo muy básico, sin embargo, axios es una librería bastante poderosa, te invito a que visites su documentación para que veas de lo que es capaz.

Fetch

Javascript a crecido tanto como lenguaje que ya no es necesario utilizar librerías externas para realizar peticiones de forma asíncrona. Justo ahora podemos hacer uso de fetch 😎

fetch(url)
.then(respuesta => respuesta.json() )
.then(respuesta => console.log(respuesta.name))

Es importante mencionar que fetch nos regresa como resultado una promesa.

---

Bien, estas son algunas formas en las cuales podemos realizar peticiones de forma asíncrona utilizando Javascript. Y cuéntanos, ¿Qué forma ya conocías, cual no?, ¿Qué forma te agrada más? dejanoslo saber en la sección de comentarios. Sin más, espero el post haya sido de tu agrado. ☕