Operaciones Asíncronas
Se tratan de mecanismos y bloques de códigos dedicados específicamente para ejecutarse en aquellas ocasiones en las que los datos a utilizar sean obtenidos con cierta demora por el navegador, en otras palabras a diferencia de los mecanismos normales los cuales se ejecutan inmediatamente sin importar si los datos están listos o no, las operaciones asíncronas esperan hasta que se obtienen los datos requeridos, permitiendo así operaciones que requieren de cierta demora como lo son por ejemplo: la carga de archivos complejos o consultas a bases de datos.
Promesas
Se tratan de objetos JavaScript particulares, estos se distinguen de otros ya que estos se utilizan para representar algunos aspectos de las operaciones asíncronas.
Para lo cual las promesas poseen dos "callbacks":
En otras palabras las promesas se dividen en dos tipos de bloques de código, el bloque "resolve" define qué acciones se realizarán al concluirse la operación asíncrona, mientras que el bloque "reject" define qué código se ejecutará en el caso de que la operación asíncrona fracase.
Para lo cual la estructura de la promesa se compone de la declaración de un nuevo objeto el cual contendrá un callback como constructor, el cual a su vez tendrá otros dos callbacks los cuales corresponden a "resolve" y "reject", en otras palabras para utilizar una promesa esta debe declararse de la misma forma que lo hace un objeto normal, y se utiliza un callback para llamar a las funciones "resolve" y "reject".
Ejemplo
Resultado
Nota: Los callbacks internos de la promesa ("resolve" y "reject") también pueden ser definidos con los nombres de "res" y de "rej".
Como se puede ver las promesas no son un objeto común, esto ya que poseen varias características particulares, una de estas es que sus datos se encuentran encapsulados, por lo cual no es posible acceder a estos por los medios de un objeto normal, para estos casos se utiliza ".then", el cual es un método de los bloques "resolve", por lo tanto el método ".then" permite obtener los datos de la promesa, pero solo en caso de que el bloque "resolve" sea el que se ejecutó.
Un último aspecto del método ".then" es que este únicamente recibe "callbacks" como parámetros, lo que significa que se utiliza una función flecha para definir la función "callback":
Ejemplo
Resultado
Por otro lado si se ejecuta el bloque del "reject" el navegador lanzará un error por consola, debido a esto surge la necesidad de manejar el error, para esto se utiliza el método ".catch", el cual al igual que en la estructura "try catch" este va a recibir el error permitiendo el manejo de este.
Ejemplo
Resultado
Nota: Las promesas son funciones asíncronas, por lo tanto a diferencia de otras esta esperará a obtener los datos requeridos para ejecutarse.
Await Async
Se trata de un complemento para facilitar el uso de las promesas, su propósito consiste en ser el bloque de código que espera, recibe y almacena en variables los resultados de las promesas, en pocas palabras "await y async" se trata de una función especializada en obtener los datos de las promesas.
Para diferenciarla de las funciones comunes se utiliza la palabra clave "async", la cual indica que se trata de una función asíncrona, por lo tanto esta no se ejecutará hasta recibir los datos necesarios, existen dos formas de declarar una función como asíncrona, las cuales son:
Incorporando Async en la Estructura de Flecha
Incorporando Async en la Estructura Clásica
El segundo elemento se trata de la palabra clave "await", la cual tiene la función de indicar que se debe esperar el resultado de la promesa que le sigue a esta, para continuar con la ejecución de la función asíncrona, de ese modo se garantizará que se mantenga la secuencia deseada en la ejecución del código de la función, para incorporar "await" en una función asíncrona esta palabra clave se incorpora justo antes del llamado a la promesa, para indicar que el siguiente elemento se trata del elemento al que hay que esperar:
Ejemplo
Una segunda función del await es que por sí solo este elemento permite acceder a los datos encapsulados que son retornados por la promesa, sin la utilización del método ".then()".
Ejemplo Completo del "Await Async" con la promesa
Resultado
En este ejemplo la promesa recibe un texto y lo retorna con un retraso aleatorio entre 0ms y 200ms, esto para emular cómo el tiempo de espera hasta que una promesa se complete puede variar, por otro lado la función "mostrarData" realiza tres llamados a la promesa "obtenerInformacion" con diferentes datos en cada llamado, y luego procede a imprimir los resultados de las promesas en consola.
En este ejemplo la promesa retorna los datos con cierto retraso, sin embargo el elemento await garantiza que la función asíncrona no continúe ejecutándose hasta que la promesa que está en vigencia retorne su resultado, por lo que siempre se tendrá el control de que los elementos se ejecuten cuando se indique a diferencia de un bloque de código similar, pero que se base en la utilización de ".then()", en el cual la función mostrará los datos apenas los obtiene por lo que se mostrarán en desorden.