Comprender las funciones async/espera en JavaScript | Explicado con ejemplos

La palabra clave async se usa para convertir una función en un función async mientras esperar La palabra clave solo se puede usar dentro de un asíncrata función. Async y esperan se utilizan para la ejecución asincrónica del programa e implementan una funcionalidad impulsada por la promesa al código.

Asíncrata La palabra clave cuando se usa para definir una función hace que la función devuelva un Promesa, mientras esperar la función hace que la función async espere una promesa que se devuelva dentro de ella. Para comprender el uso de Async y esperar funciones, debe tener una gran comprensión de cómo funcionan las promesas en JavaScript.

Async and Await es un concepto de JavaScript de nivel avanzado, por eso lo aprenderemos a través de varios ejemplos y lo entendemos atravesando el ejemplo de línea por línea.

Ejecución secuencial en JavaScript

JavaScript es un lenguaje de secuencias de comandos secuencialmente ejecutado o podemos decir que. El código se invoca línea por línea de forma procesal.

Considere las líneas de código que se escriben a continuación:

función hello ()
consola.log ("Hola mundo");
linuxhint ();

función linuxHint ()
consola.log ("Tutorial de Linuxhint");

consola.log ("El código se ejecuta en la secuencia de que se invoca");
Hola();

Observe la salida en la consola como:

Como puede ver, las funciones o líneas invocadas primero siempre se terminaron primero. La razón para mostrarle un ejemplo simple como este fue hacerle notar cuándo la secuencia de ejecución cambiará con async espera y promete.

Async/ espera en acción

Considere una función simple que devuelve algún texto, como:

función getUsers ()
consola.log ("dentro de la función getUsers");
devolver "usuarios";

consola.log ("Inicio del código");
var list = getUsers ();
consola.registro (lista);
consola.log ("final del código");

La salida del siguiente código es:

Como podemos ver la función devuelta como la cadena que dice, los usuarios. Intentemos poner la palabra clave asíncrata antes de la definición de función como:

function async getUsers ()
consola.log ("dentro de la función getUsers");
devolver "usuarios";

Ahora, en su consola, verá que esta vez en torno a la función devolvió una promesa que tenía el estado "cumplido":

Pero en los casos en que está obteniendo algunos datos de alguna API REST o cualquier API web, esta promesa cambiará múltiples estados, desde pendientes hasta cumplidos/rechazados. En tales casos, esperamos el retorno del resultado de la promesa utilizando el esperar palabra clave.

Para esto, vamos a usar la API de Fetch y obtener la información sobre los usuarios de la "API.github/usuarios ”con las siguientes líneas de código:

function async getUsers ()
consola.log ("dentro de la función getUsers");
Const Respuesta = ALEA FETCH ("https: // API.github.com/usuarios ");
consola.log ("API respondió, los usuarios recibieron");
Const Users = Respuesta de espera.json ();
consola.log ("JSON convertido");
devolver usuarios;

Hay muchas cosas que explicar aquí:

• Cuando se inicializa una nueva variable con esta función, la primera línea se ejecutará y el texto se imprimirá en la consola.
• Cuando el código llega a la palabra clave esperar Verificará si la promesa se cumple o se pende, si está en el estado pendiente, saldrá de esta función y ejecutará otras partes del código.
• Después de ejecutar otras partes del código, volverá dentro de la función en la primera palabra clave esperar y volver a verificar el estado de la promesa.
• Al recibir un estado cumplido/rechazado, ejecutará la siguiente línea que es consola.registro().
• En la siguiente línea, respuesta.json también es una promesa, verificará su estado y, al pendiente, saldrá de la función y ejecutará las otras partes del código.
• Después de ejecutar todo el otro código, el puntero volverá a la función, verifique el estado de respuesta.json, y en el estado cumplido/rechazado ejecutará la siguiente línea.

De esta manera, todo este programa saldrá de la ejecución secuencial normal e implementará una ejecución asincrónica del código utilizando promesas y asíncrono/espera Palabras clave.

El fragmento de código completo es como:

function async getUsers ()
consola.log ("dentro de la función getUsers");
Const Respuesta = ALEA FETCH ("https: // API.github.com/usuarios ");
consola.log ("API respondió, los usuarios recibieron");
Const Users = Respuesta de espera.json ();
consola.log ("JSON convertido");
devolver usuarios;

consola.log ("el código inicia");
var list = getUsers ();
consola.log ("Lista de variables creadas");
consola.registro (lista);
lista.Entonces ((usuario) => Consola.log (usuario));
consola.log ("Última línea del código");

Nota: La línea "lista.Entonces ((usuario) => Consola.log (usuario));"No se ejecutará hasta que la función GetUsers se ocupa de todas las promesas y devuelve el valor, incluso aquí la ejecución secuencial alterará.

Ahora, si ejecuta este programa como un script de un archivo HTML, verá la siguiente salida en su consola:

Examine de cerca el resultado y notará el flujo de ejecución como:

• Se inicia el código y la variable se declara en la función.
• El puntero entra dentro de la función, imprime la primera línea, ve el esperar Palabra clave, deja la función y devuelve una promesa pendiente a la variable "lista"Que acabamos de crear.
• Ejecuta otras partes del código (por eso puede ver "Última línea del código") Mientras espera la promesa en el esperar.
• Ve la línea lista.entonces() pero no se ejecutará hasta que la función GetUsers Devuelve una promesa con un estado resuelto/rechazado.
• Regresa dentro de la función, API responde, crea una lista de usuarios y la convierte en JSON.
• El estado de las promesas devueltas por la función async GetUsers cambios en cumplidos y el lista.entonces() Línea ejecutada y obtenemos los datos JSON impresos en la consola.

Así es como altera la ejecución secuencial e implementa la ejecución asincrónica

Conclusión

Asíncrata y esperar Las palabras clave se utilizan para implementar la ejecución asincrónica del código JavaScript con la ayuda de promesas. Asíncrata palabra clave cuando se usa antes de la declaración de una función convierte que funcione en un función async y su tipo de devolución cambia a una promesa. Mientras esperar es una palabra clave que espera una promesa que se reciba dentro de un función async. Asíncrono/espera Ayúdanos a escribir promesas de una manera mucho más agradable y ordenada que sea más legible y comprensible.