Marcos D. Alvarez M.

Email: [email protected]
Linkedin: https://www.linkedin.com/in/marcosdavidalvarezmarte

Firmado digitalmente por

Marcos D. Alvarez M.

Marcos D. Nombre de reconocimiento

(DN): cn=Marcos D. Alvarez M.,
o, ou=Desarrollador Full-Stack,

Alvarez M. email=marcosdavidalvarez@gm
ail.com, c=VE
Fecha: 2020.05.28 16:07:01
-04'00'

Funciones Asíncronas (Parte 1)

Funciones asincrónicas (Parte 1)
Marcos D. Alvarez M.
Email: [email protected]
Linkedin: https://www.linkedin.com/in/marcosdavidalvarezmarte

Introducción

Bienvenidos a este apartado donde veremos el uso de las funciones asíncronas

tratando de explicar detalladamente cada linea que elaboremos con el fin de facilitar el
aprendizaje en estos temas.

Para este tutorial, es necesario que conozcamos lo básico de la estructura HTML,

la vinculación de archivos (.js) externos dentro del HTML, nociones básicas en el
manejo de datos en formato JSON, Javascript y sus objetos Javascript.

El objetivo de este documento es facilitar la base para poder entender y

comprender como podemos trabajar la carga asíncrona de nuestras aplicaciones y
páginas web procesando cualquier solicitud a un servidor o recurso externo en segundo
plano. Para eso, estudiaremos que es el ajax, callbacks, promesas, async/await.

Muchos de los conceptos que necesitaremos entender podemos ubicarlos en la

web, por lo que no necesitamos reinventar la rueda desarrollando definiciones
complejos. En este sentido tomare referencia de los que considere útil y lo indicare
mediante su correspondiente vinculo.

Pàgina: 2
Venezuela - 28/05/20
Ing. Marcos D. Alvarez M.
https://gitlab.com/dvlpersupp/peticiones-asincronas
Funciones asincrónicas (Parte 1)
Marcos D. Alvarez M.
Email: [email protected]
Linkedin: https://www.linkedin.com/in/marcosdavidalvarezmarte

Solicitudes AJAX

Lo primero que debemos conocer y comprender es el AJAX. Para eso vamos a

extraer lo que dice nuestro amigo Wikipedia:

AJAX, acrónimo de Asynchronous JavaScript And XML (JavaScript asíncrono y XML), es una
técnica de desarrollo web para crear aplicaciones interactivas o RIA (Rich Internet Applications). Estas
aplicaciones se ejecutan en el cliente, es decir, en el navegador de los usuarios mientras se mantiene la
comunicación asíncrona con el servidor en segundo plano. De esta forma es posible realizar cambios
sobre las páginas sin necesidad de recargarlas, mejorando la interactividad, velocidad y usabilidad en las
aplicaciones.

Basándonos en este concepto podemos inferir que AJAX hace referencia a varias
tecnologías, las cuales nos permitirán actualizar nuestras aplicaciones o servicios web
continuamente sin tener que recargar nuestra vista. En estos temas utilizaremos algunas
de muchas herramientas para ir entendiendo como se trabaja con estos tipos de carga
asíncrona, De esta manera podemos garantizar el aprendizaje de cualquier herramienta
o código que nos permita la comunicación asíncrona con nuestros recursos.

Una vez entendido esto, vamos a desarrollar nuestro primer código usando
Javascript (JS) para realizar nuestra petición HTTP.

Quizás te parezca nuevo el termino HTTP, no te preocupes, nuestro amigo

Wikipedia nos dice que esto no es más que el protocolo de comunicación que permite
las transferencias de información en la World Wide Web. Este protocolo sigue el
esquema petición-respuesta entre un cliente y un servidor. Para explicar mejor esto
vamos con un ejemplo.

Pàgina: 3
Venezuela - 28/05/20
Ing. Marcos D. Alvarez M.
https://gitlab.com/dvlpersupp/peticiones-asincronas
Funciones asincrónicas (Parte 1)
Marcos D. Alvarez M.
Email: [email protected]
Linkedin: https://www.linkedin.com/in/marcosdavidalvarezmarte

Como podemos observar en

la imagen, el esquema
petición-respuesta parte de
la arquitectura cliente-
servidor que no es más que
un modelo de diseño de
software en el que las tareas
se reparten entre recursos o
servicios, llamados
servidores, y los demandantes, llamados clientes.

En tal sentido podemos deducir que nuestras aplicaciones o páginas serán los
clientes que se encargaran de consumir los recursos de un servicio el cual será el
encargado de darnos las respuestas. Por tanto debemos desarrollar nuestro código, el
cual será el encargado de solicitar(petición) los recursos(respuesta) a nuestro servidor.

Vamos al código:

Para realizar una petición HTTP con JS necesitamos crear una instancia de una
clase que nos provea esta funcionalidad, esta instancia la crearemos usando
XMLHttpRequest dado que La interfaz se implementa como una clase. Por tanto
crearemos un archivo llamado ajax.js y agregaremos el siguiente código, el cual nos
creara la instancia del objeto .

http_request = new XMLHttpRequest();

Pàgina: 4
Venezuela - 28/05/20
Ing. Marcos D. Alvarez M.
https://gitlab.com/dvlpersupp/peticiones-asincronas
Funciones asincrónicas (Parte 1)
Marcos D. Alvarez M.
Email: [email protected]
Linkedin: https://www.linkedin.com/in/marcosdavidalvarezmarte

Con esta línea ya hemos definido nuestro objeto que se encargara de procesar
toda nuestra petición, lo siguiente que definiremos será la función que ejecutaremos una
ves obtengamos la respuesta del servidor. Para eso utilizaremos el método
onreadystatechange que nos provee el objeto XMLHttpRequest que acabamos de
instanciar.

EJ: http_request.onreadystatechange = NombreDeNuestraFuncion; http_request.onreadystatechange = NombreDeNuestraFuncion;

Con base en esto crearemos una función vaciá con el fin de asignarla a al método
onreadystatechange de nuestro objeto, la cual será llamada cuando la propiedad
readyState cambie.

http_request = new XMLHttpRequest(); //Instancia del objeto XMLHttpRequest

function HandleResponse() { //Función que manejara la respuesta

http_request.onreadystatechange = HandleResponse; * Asignamos nuestra función a la propiedad

onreadystatechange *

En el caso anterior hemos definido la función y posteriormente mediante su

nombre la hemos asignado al objeto XMLHttpRequest, sin embargo también es posible
pasar la función directamente, hagamos un ejemplo para entenderlo mejor.

Pàgina: 5
Venezuela - 28/05/20
Ing. Marcos D. Alvarez M.
https://gitlab.com/dvlpersupp/peticiones-asincronas
Funciones asincrónicas (Parte 1)
Marcos D. Alvarez M.
Email: [email protected]
Linkedin: https://www.linkedin.com/in/marcosdavidalvarezmarte

http_request = new XMLHttpRequest(); //Instancia del objeto XMLHttpRequest

//Función directamente enviada al objeto onreadystatechange

http_request.onreadystatechange = function HandleResponse() {
//Función que manejara la respuesta
};

//Utilizando función de flecha

Para este ejemplo reflejamos
http_request.onreadystatechange = (() => { como se puede simplificar nuestro código
//Función que manejara la respuesta
introduciendo directamente la función a la propiedad e incluso utilizando la función de
});
flecha. Ya conociendo estas otras alternativas, dejaremos la función de flecha para
continuar y comentaremos o eliminaremos los sobrantes las cuales mencione con fines
educativos.

En este punto nuestro código debería quedar de la siguiente manera:

http_request = new XMLHttpRequest(); //Instancia del objeto XMLHttpRequest

//Utilizando función de flecha

http_request.onreadystatechange = (() => {
//Función que manejara la respuesta
});

Luego de declarar el objeto y establecer la función que manejara la respuesta, es

necesario hacer nuestra petición al servidor, para esto utilizaremos los métodos open()
y send() del objeto que hemos creado.

Para esta practica utilizaremos un servidor de prueba llamado (

https://jsonplaceholder.typicode.com/ ) que nos proveerá la información necesaria para
poder ejecutar nuestra solicitud.

Si ingresamos a la URL del servidor de prueba desde nuestro navegador y leemos un

poco en la documentación:

Pàgina: 6
Venezuela - 28/05/20
Ing. Marcos D. Alvarez M.
https://gitlab.com/dvlpersupp/peticiones-asincronas
Funciones asincrónicas (Parte 1)
Marcos D. Alvarez M.
Email: [email protected]
Linkedin: https://www.linkedin.com/in/marcosdavidalvarezmarte

Notamos
rápidamente que tenemos varios endpoint para las solicitudes, en nuestro caso
utilizaremos el endpoint que nos permitirá obtener los posts, nuestra ruta final será
(“/posts”), En este caso la ruta completa de la petición que crearemos será:

“https://jsonplaceholder.typicode.com/posts”

Si ingresamos a esta ruta desde el navegador nos muestra una estructura JSON
con todos los posts de prueba que nos ofrece este servidor.

Pàgina: 7
Venezuela - 28/05/20
Ing. Marcos D. Alvarez M.
https://gitlab.com/dvlpersupp/peticiones-asincronas
Funciones asincrónicas (Parte 1)
Marcos D. Alvarez M.
Email: [email protected]
Linkedin: https://www.linkedin.com/in/marcosdavidalvarezmarte

Ahora que tenemos el endpoint es necesario determinar que tipo de solicitud

acepta. Por razones notables podemos deducir que es una petición de tipo GET debido
a que hemos logrado consultar sus datos ingresando la URL directamente a través del
navegador, sin embargo si volvemos atrás vemos que la documentación lo especifica,
Pues en la programación no debemos dar nada por sentado jeje.

Si aún tenemos alguna duda, podemos consultar con la herramienta que nos
ofrece el navegador, en mi caso usare Chrome DevTools, en los navegadores por lo
general las herramientas de depuración son similares, para acceder a estas
herramientas en nuestro navegador, damos click con el botón derecho para abrir el
menú contextual y seleccionamos inspeccionar código o utilizamos la tecla de acceso
rápido f12.

Pàgina: 8
Venezuela - 28/05/20
Ing. Marcos D. Alvarez M.
https://gitlab.com/dvlpersupp/peticiones-asincronas
Funciones asincrónicas (Parte 1)
Marcos D. Alvarez M.
Email: [email protected]
Linkedin: https://www.linkedin.com/in/marcosdavidalvarezmarte

Estas opciones abrirán la herramienta del navegador, en mi caso se puede

apreciar en la parte derecha de la imagen a continuación.

No necesariamente deben tener la herramienta al lado derecho, puede estar a su

lado izquierdo o en la parte inferior, eso es según lo tengan configurado.
Pàgina: 9
Venezuela - 28/05/20
Ing. Marcos D. Alvarez M.
https://gitlab.com/dvlpersupp/peticiones-asincronas
Funciones asincrónicas (Parte 1)
Marcos D. Alvarez M.
Email: [email protected]
Linkedin: https://www.linkedin.com/in/marcosdavidalvarezmarte

Luego seleccionamos la sección de Newtwork como indica la siguiente imagen.

Si nuestro navegador ya tiene cargado la ruta del endpoint

https://jsonplaceholder.typicode.com/posts recargamos para visualizar como se va
cargando la información en la sección Network, si no están situados allí, deberán
ingresar la URL y cargar la página.

Una vez culminada la carga veremos la solicitud o petición que hace el

navegador en el listado inferior

Pàgina: 10
Venezuela - 28/05/20
Ing. Marcos D. Alvarez M.
https://gitlab.com/dvlpersupp/peticiones-asincronas
Funciones asincrónicas (Parte 1)
Marcos D. Alvarez M.
Email: [email protected]
Linkedin: https://www.linkedin.com/in/marcosdavidalvarezmarte

Si damos click para ver sus detalles podemos verificar toda la información de la
solicitud que ha lanzado nuestro navegador, en donde podemos comprobar que es una
solicitud de tipo GET.

Ohhh Tal como lo indico la documentación!!!, esto es de mucha ayuda cuando

debemos verificar las peticiones, sus respuestas, sus estados etc, pero este apartado no
es un tema de depuración quizás más adelante elabore un apartado para ese contenido,
por ahora es importante saber que existe y que es de mucha ayuda si se llega a
dominar. Para no desviarnos del tema es importante que entendamos que el navegador
realiza varios tipos de peticiones, estas pueden ser de tipo GET, POST, PUT, DELETE,
etc, cada una tiene un propósito de uso y seria bueno que los conociéramos. Sin
embargo esta sección tampoco cubre ese contenido pero es importante que
profundicen es ellos para una mayor comprensión.

Retomando nuestro código, es necesario que implementemos la función open() y

send(), la primera función recibe como parámetro el tipo de solicitud, en nuestro caso
será GET, este parámetro debe colocarse en mayúscula para evitar problemas con
navegadores como Firefox que pueden no procesar la petición.

El segundo parámetro es la URL a donde apuntaremos nuestra petición a la cual

haremos la solicitud, en nuestro caso es “https://jsonplaceholder.typicode.com/posts”
esta es la URL donde solicitaremos el listado de posts.
Pàgina: 11
Venezuela - 28/05/20
Ing. Marcos D. Alvarez M.
https://gitlab.com/dvlpersupp/peticiones-asincronas
Funciones asincrónicas (Parte 1)
Marcos D. Alvarez M.
Email: [email protected]
Linkedin: https://www.linkedin.com/in/marcosdavidalvarezmarte

Y el tercer parámetro es un valor booleano que establece si la petición será

asíncrona o no, de ser TRUE esto permitirá que nuestra aplicación o página pueda
seguir su curso de ejecución mientras espera la respuesta de nuestra solicitud.

Nuestro código entonces quedaría de la siguiente manera:

Ya por último invocamos el método send() de nuestro objeto, el cual será el

encargado de lanzar nuestra solicitud a través del navegador. Este método recibe la
información que puede ser enviada al servidor, esto es en caso de que utilicemos una
solicitud de tipo POST. En nuestro caso no enviamos parámetros además nuestra
petición es de tipo GET, este tipo de petición posee sus parámetros en la misma URL.
Pero aun así no tenemos parámetros que enviar, así que solo invocaremos el método
sin ningún parámetro y nos quedaría de la siguiente manera:

Pàgina: 12
Venezuela - 28/05/20
Ing. Marcos D. Alvarez M.
https://gitlab.com/dvlpersupp/peticiones-asincronas
Funciones asincrónicas (Parte 1)
Marcos D. Alvarez M.
Email: [email protected]
Linkedin: https://www.linkedin.com/in/marcosdavidalvarezmarte

¡Eureka!

Llego la hora de probar nuestro código!,

Para la prueba creare una carpeta en mi escritorio llamada petición, dentro

colocare el archivo ajax.js con el código que hemos creado hasta ahora y creare un
archivo llamado index.html que se encargara de invocar nuestro script con algunas
informaciones de complemento.

En las siguientes imágenes se puede apreciar en el archivo ajax.js que he

almacenado el código que implementaremos, y en el archivo index.html he creado la
estructura básica de una página y he llamado el script para ejecutarlo e invocar nuestra
petición.

ajax.js

Pàgina: 13
Venezuela - 28/05/20
Ing. Marcos D. Alvarez M.
https://gitlab.com/dvlpersupp/peticiones-asincronas
Funciones asincrónicas (Parte 1)
Marcos D. Alvarez M.
Email: [email protected]
Linkedin: https://www.linkedin.com/in/marcosdavidalvarezmarte

index.html

he creado la estructura básica y en la línea 8 del archivo index.html he creado un

texto de bienvenida y he invocado nuestro script.

Una ves creado los archivos y vinculado como se muestra en la línea 5 del index.html,
abrimos nuestro index.html en el navegador.

Pàgina: 14
Venezuela - 28/05/20
Ing. Marcos D. Alvarez M.
https://gitlab.com/dvlpersupp/peticiones-asincronas
Funciones asincrónicas (Parte 1)
Marcos D. Alvarez M.
Email: [email protected]
Linkedin: https://www.linkedin.com/in/marcosdavidalvarezmarte

A simple vista parece haber pasado nada más que nuestro texto en el HTML, pero si
examinamos la consola de nuestro navegador como lo hicimos anteriormente.

Vemos que han salido varias solicitudes, entre ellas la solicitud de nuestra
petición al endpoint “/posts” del servicio https://jsonplaceholder.typicode.com/ (si no les
aparecen las solicitudes, deben recargar la página).

Vemos entonces que nuestro código está ejerciendo su función, Si entramos en nuestra
solicitud para ver sus detalles:

Pàgina: 15
Venezuela - 28/05/20
Ing. Marcos D. Alvarez M.
https://gitlab.com/dvlpersupp/peticiones-asincronas
Funciones asincrónicas (Parte 1)
Marcos D. Alvarez M.
Email: [email protected]
Linkedin: https://www.linkedin.com/in/marcosdavidalvarezmarte

visualizamos que nos muestra la URL a la cual se realizo la solicitud, el tipo de solicitud
que hemos hecho, en este caso GET, y el STATUS con un valor de 200 que nos indica
que fue exitoso.

Ahora tal ves nos preguntemos... ¿ummm y la información donde la consigo?

Para eso vamos a la sección de respuesta(Response):

Pàgina: 16
Venezuela - 28/05/20
Ing. Marcos D. Alvarez M.
https://gitlab.com/dvlpersupp/peticiones-asincronas
Funciones asincrónicas (Parte 1)
Marcos D. Alvarez M.
Email: [email protected]
Linkedin: https://www.linkedin.com/in/marcosdavidalvarezmarte

allí encontraremos la respuesta en formato JSON que nos ha enviado el servidor

es el mismo contenido del post que vimos directamente desde el navegador pero esta
vez a través de una petición ajax.

Hasta ahora vemos que todo va bien, pero necesitamos manejar esa respuesta,
pues el usuario no va a inspeccionar el código para verificar las solicitudes y ver que
información le llego. Además no está visiblemente agradable. Para eso necesitamos
tomar los valores y mostrarlos en pantalla.

Donde haríamos eso!!!?

Pàgina: 17
Venezuela - 28/05/20
Ing. Marcos D. Alvarez M.
https://gitlab.com/dvlpersupp/peticiones-asincronas
Funciones asincrónicas (Parte 1)
Marcos D. Alvarez M.
Email: [email protected]
Linkedin: https://www.linkedin.com/in/marcosdavidalvarezmarte

Sencillo!!, este va en nuestra función que manejara la respuesta, la cual creamos al

inicio de este contenido.

Esta función que agregamos a la propiedad onreadystatechange esta escuchando

por así decirlo, todo el proceso de nuestra petición y nos va a ir indicando como va a
través de la propiedad readyState del objeto que creamos. Esta propiedad maneja
varios valores que nos indican como va el proceso.

Estos valores son:

0 = No inicializada. → todavía no se llamó a open().

1 = Leyendo. → todavía no se llamó a send().

2 = Leído. → send()ya fue invocado, y los encabezados y el estado están disponibles.

3 = Interactiva. → Descargando; responseText contiene información parcial.

4 = Completo. → La operación está terminada.

Pàgina: 18
Venezuela - 28/05/20
Ing. Marcos D. Alvarez M.
https://gitlab.com/dvlpersupp/peticiones-asincronas
Funciones asincrónicas (Parte 1)
Marcos D. Alvarez M.
Email: [email protected]
Linkedin: https://www.linkedin.com/in/marcosdavidalvarezmarte

En este momento nos interesa saber si nuestro proceso se ha completado, sin

importar que haya finalizado bien o mal, pero que este completo. Para eso evaluamos la
propiedad y verificaremos si su valor es equivalente al 4, numero que nos indica que se
ha completado la solicitud, de esta manera si el proceso a finalizado continuaremos
nuestro flujo.

Nuestro código quedaría así:

He añadido dos console.log() para poder visualizar en consola el flujo del código. Si
guardamos los cambios y cargamos nuevamente el index.html en el navegador, veremos
esta vez en la pestaña consola de nuestra herramienta de depuración como nuestra
función va imprimiendo como avanza nuestra petición.

Pàgina: 19
Venezuela - 28/05/20
Ing. Marcos D. Alvarez M.
https://gitlab.com/dvlpersupp/peticiones-asincronas
Funciones asincrónicas (Parte 1)
Marcos D. Alvarez M.
Email: [email protected]
Linkedin: https://www.linkedin.com/in/marcosdavidalvarezmarte

Observamos que la consola refleja varias veces la palabra procesando la cual

coloque dentro de mi función console.log() que mostraría cuando la petición aun no se
haya completado, y una ves que la petición finaliza ejecuta el console.log() que nos
indica que el proceso se ha completado.

Pero esto solo nos indica que se completo el proceso, no si el proceso fue exitoso o si
ha fallado. Para poder ver como finalizo el proceso necesitamos revisar el STATUS.

El código que se muestra en el STATUS de la solicitud es la que nos indica si la

respuesta del servidor ha sido exitosa o si a ocurrido algún inconveniente en el camino.
Para ver la lista de estatus puedes dirigirte a:

Pàgina: 20
Venezuela - 28/05/20
Ing. Marcos D. Alvarez M.
https://gitlab.com/dvlpersupp/peticiones-asincronas
Funciones asincrónicas (Parte 1)
Marcos D. Alvarez M.
Email: [email protected]
Linkedin: https://www.linkedin.com/in/marcosdavidalvarezmarte

http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html ya que no lo abarcare en este

contenido

Para consultar el estado debemos consultar la propiedad status de nuestro objeto una
vez se haya completado la solicitud, para eso añadimos esta validación dentro del
bloque que nos indica que la petición se completo como se muestra a continuación en el
código:

He añadido en la linea 10 hasta la linea 14 la condición para evaluar el STATUS de la

solicitud, si guardamos y recargamos nuestro index.html observaremos que esta vez nos
indica que se ha completado pero exitosamente.

Pàgina: 21
Venezuela - 28/05/20
Ing. Marcos D. Alvarez M.
https://gitlab.com/dvlpersupp/peticiones-asincronas
Funciones asincrónicas (Parte 1)
Marcos D. Alvarez M.
Email: [email protected]
Linkedin: https://www.linkedin.com/in/marcosdavidalvarezmarte

Hagamos una prueba para ver que ocurre en caso contrario, si cambiara mi URL
añadiéndole una “s” de mas para que quedara como “postss” la ruta estaría errada,

Pàgina: 22
Venezuela - 28/05/20
Ing. Marcos D. Alvarez M.
https://gitlab.com/dvlpersupp/peticiones-asincronas
Funciones asincrónicas (Parte 1)
Marcos D. Alvarez M.
Email: [email protected]
Linkedin: https://www.linkedin.com/in/marcosdavidalvarezmarte

Observemos que nos respondería nuestra petición.

El navegador nos indica que fallo, e incluso lo marca en rojo. Además si vemos los
detalles:

Pàgina: 23
Venezuela - 28/05/20
Ing. Marcos D. Alvarez M.
https://gitlab.com/dvlpersupp/peticiones-asincronas
Funciones asincrónicas (Parte 1)
Marcos D. Alvarez M.
Email: [email protected]
Linkedin: https://www.linkedin.com/in/marcosdavidalvarezmarte

Encontramos que el STATUS es ahora el 503, según la documentación esto es (Servicio

no disponible):

Esto se debe a que la ruta no existe, debido a que hemos generado un fallo en nuestra
petición al indicarle una ruta desconocida, en este caso el servidor encargado de
manejar las solicitudes nos ha indicado que el servicio no esta disponible a traves del
status de nuestra solicitud. Y si vemos nuestra consola, encontraremos el mensaje que
establecimos cuando el estatus fuera distinto a 200

Hasta ahora vemos que todo el proceso y los flujos que establecimos van en el camino
correcto. Arreglemos nuestro endpoint quitando la “s” que añadimos de mas para que
todo vuelva a quedar funcional.

Ahora para manejar nuestra respuesta utilizaremos la propiedad “responseText” la cual

nos devolverá toda la información JSON como una cadena de texto, y utilizaremos la
función llamada JSON.parse() para poder convertir nuestro String en un objeto que mas
adelante manipularemos, luego de esto lo introduciremos en un console.log() para poder
ver la lista de objetos(respuesta) que nos ha retornado el servidor.
Pàgina: 24
Venezuela - 28/05/20
Ing. Marcos D. Alvarez M.
https://gitlab.com/dvlpersupp/peticiones-asincronas
Funciones asincrónicas (Parte 1)
Marcos D. Alvarez M.
Email: [email protected]
Linkedin: https://www.linkedin.com/in/marcosdavidalvarezmarte

Nuestro código quedaría de la siguiente manera:

Una ves que implementemos nuestro código y recarguemos nuestro index.html veremos
lo siguiente:

Pàgina: 25
Venezuela - 28/05/20
Ing. Marcos D. Alvarez M.
https://gitlab.com/dvlpersupp/peticiones-asincronas
Funciones asincrónicas (Parte 1)
Marcos D. Alvarez M.
Email: [email protected]
Linkedin: https://www.linkedin.com/in/marcosdavidalvarezmarte

Encontraremos en nuestra consola inicialmente las impresiones que nos indican el

estado de la petición y una ves que se ha completado visualizaremos el array de
objetos, los cuales son el resultado de nuestros posts solicitados, ya formateados para
poder manipularlos con nuestro JS y poder mostrarlos en pantalla.

Si expandimos el array para detallar mejor:

Efectivamente encontramos los posts como los visualizamos anteriormente en el inicio,

solo que esta vez los tenemos como objetos, Logrando acceder a sus propiedades para
manipularlos como necesitemos.
Pàgina: 26
Venezuela - 28/05/20
Ing. Marcos D. Alvarez M.
https://gitlab.com/dvlpersupp/peticiones-asincronas
Funciones asincrónicas (Parte 1)
Marcos D. Alvarez M.
Email: [email protected]
Linkedin: https://www.linkedin.com/in/marcosdavidalvarezmarte

Para hacer algo sencillamente practico, vamos a recorrer todo nuestro array de objeto
para mostrarlo en el navegador.

Primero nuestro código JS quedaría así:

Pàgina: 27
Venezuela - 28/05/20
Ing. Marcos D. Alvarez M.
https://gitlab.com/dvlpersupp/peticiones-asincronas
Funciones asincrónicas (Parte 1)
Marcos D. Alvarez M.
Email: [email protected]
Linkedin: https://www.linkedin.com/in/marcosdavidalvarezmarte

Y nuestro index.html quedaría de la siguiente manera:

Vemos que nuestro js creció un poco jejeje, no te preocupes ya vamos a explicarlo.

Lo primero que hicimos fue en la linea 13, tomar nuestra respuesta la cual viene como
String y convertirla en un array de objeto a través de la función JSON.parse(), luego la
almacenarlo en la variable PostArray.

Luego en la linea 14 creamos la variable out y la inicial izamos como un String vació, allí
se almacenaran todos los tags html con la información cuando recorramos los posts
dentro del bucle.

En la linea 16 inicializamos nuestro foreach para recorrer todo nuestro array de objeto,
luego haciendo uso de la interpolación empleada a partir de EcmaScript 6 hemos
concatenado nuestros contenedores HTML y el valor de cada objeto recorrido,
accediendo a ellos a través de su notación de puntos como se ve en la linea 19 y 20 y
almacenándolo en la variable out linea 17.
Pàgina: 28
Venezuela - 28/05/20
Ing. Marcos D. Alvarez M.
https://gitlab.com/dvlpersupp/peticiones-asincronas
Funciones asincrónicas (Parte 1)
Marcos D. Alvarez M.
Email: [email protected]
Linkedin: https://www.linkedin.com/in/marcosdavidalvarezmarte

por ultimo en la linea 25 tomamos el contenedor con el id “posts” e insertamos todo el

resultado de nuestra variable out.

Finalmente en el index.html en la linea 9 añadimos un tag h1 para indicar que el titulo

de la sección sera “Post”, luego en la linea 10 creamos el div que sera utilizado
posteriormente por nuestro ajax.js para añadir el resultado a través del id “posts”, por
ultimo he movilizado la vinculación del script justo ante de la etiqueta de cierre del body
para segurar que el contenedor que invocamos en nuestro script para agregar los
valores exista antes que el ajax.js intente añadir el contenido.

Si corremos nuestro código recargando el index.html veremos nuestro resultado:

Pàgina: 29
Venezuela - 28/05/20
Ing. Marcos D. Alvarez M.
https://gitlab.com/dvlpersupp/peticiones-asincronas
Funciones asincrónicas (Parte 1)
Marcos D. Alvarez M.
Email: [email protected]
Linkedin: https://www.linkedin.com/in/marcosdavidalvarezmarte

Hemos logrado que todos los posts se puedan visualizar sin problemas, de esta manera
alcanzamos hacer que la petición verificando todo el proceso mostrando su avance en
consola y su resultado en pantalla, ya quedaría mejorarlo visualmente con css. Pero ya
hemos creado nuestra primera petición a código con JS.

Para esta primera parte es bueno practicar y tratar de comprender cada uno de los
puntos tratado, Pueden ir consultando los avance en el repositorio provisto en el pie de
página para verificar los tutoriales publicados.

Con esta primera parte espero se hayan hecho una idea del funcionamiento asíncrono, y
como nos beneficiara en nuestras páginas y aplicaciones, permitiéndonos consultar en
cualquier momento los servicios y poder actualizar el contenido de nuestro sitio sin tener
que refrescar la página. Esto es solo una pequeña parte de las muchas que podemos
lograr con todas las herramientas que nos ofrecen los lenguajes para la carga
asíncrona.

Una vez comprendido esto, en la segunda parte abarcare las peticiones con jquery para
luego adentrarnos a los callbacks, promesas y async/await

Hasta la parte 2.

Pàgina: 30
Venezuela - 28/05/20
Ing. Marcos D. Alvarez M.
https://gitlab.com/dvlpersupp/peticiones-asincronas