En este tutorial, aprenderá sobre JavaScript async / await palabras clave con la ayuda de ejemplos.
Utiliza la asyncpalabra clave con una función para representar que la función es una función asincrónica. La función asincrónica devuelve una promesa.
La sintaxis de la asyncfunción es:
async function name(parameter1, parameter2,… paramaterN) ( // statements )
Aquí,
- name - nombre de la función
- parámetros : parámetros que se pasan a la función
Ejemplo: función asincrónica
// async function example async function f() ( console.log('Async function.'); return Promise.resolve(1); ) f();
Salida
Función asincrónica.
En el programa anterior, la asyncpalabra clave se usa antes de la función para representar que la función es asíncrona.
Dado que esta función devuelve una promesa, puede usar el método de encadenamiento then()como este:
async function f() ( console.log('Async function.'); return Promise.resolve(1); ) f().then(function(result) ( console.log(result) ));
Salida
Función asíncrona 1
En el programa anterior, la f()función se resuelve y el then()método se ejecuta.
JavaScript espera palabra clave
La awaitpalabra clave se usa dentro de la asyncfunción para esperar la operación asincrónica.
La sintaxis a utilizar await es:
let result = await promise;
El uso de awaitpausa la función asíncrona hasta que la promesa devuelve un valor de resultado (resolver o rechazar). Por ejemplo,
// a promise let promise = new Promise(function (resolve, reject) ( setTimeout(function () ( resolve('Promise resolved')), 4000); )); // async function async function asyncFunc() ( // wait until the promise resolves let result = await promise; console.log(result); console.log('hello'); ) // calling the async function asyncFunc();
Salida
Promesa resuelta hola
En el programa anterior, Promisese crea un objeto y se resuelve después de 4000 milisegundos. Aquí, la asyncFunc()función se escribe usando la asyncfunción.
La awaitpalabra clave espera a que se complete la promesa (resolver o rechazar).
let result = await promise;
Por lo tanto, hola se muestra solo después de que el valor de promesa esté disponible para la variable de resultado.
En el programa anterior, si awaitno se utiliza, se muestra un saludo antes de que se resuelva la promesa.
Funcionamiento de la función async / await
Nota : awaitsolo puede usar dentro de funciones asíncronas.
La función asincrónica permite que el método asincrónico se ejecute de una manera aparentemente sincrónica. Aunque la operación es asíncrona, parece que la operación se ejecuta de manera síncrona.
Esto puede resultar útil si hay varias promesas en el programa. Por ejemplo,
let promise1; let promise2; let promise3; async function asyncFunc() ( let result1 = await promise1; let result2 = await promise2; let result3 = await promise3; console.log(result1); console.log(result1); console.log(result1); )
En el programa anterior, awaitespera a que se complete cada promesa.
Manejo de errores
Mientras usa la asyncfunción, escribe el código de manera síncrona. Y también puede utilizar el catch()método para detectar el error. Por ejemplo,
asyncFunc().catch( // catch error and do something )
La otra forma en que puede manejar un error es usando try/catchblock. Por ejemplo,
// a promise let promise = new Promise(function (resolve, reject) ( setTimeout(function () ( resolve('Promise resolved')), 4000); )); // async function async function asyncFunc() ( try ( // wait until the promise resolves let result = await promise; console.log(result); ) catch(error) ( console.log(error); ) ) // calling the async function asyncFunc(); // Promise resolved
En el programa anterior, hemos utilizado try/catchblock para manejar los errores. Si el programa se ejecuta correctamente, irá al trybloque. Y si el programa arroja un error, irá al catchbloque.
Para obtener más información try/catchen detalle, visite JavaScript JavaScript try / catch.
Beneficios de usar la función asincrónica
- El código es más legible que usar una devolución de llamada o una promesa.
- El manejo de errores es más simple.
- La depuración es más sencilla.
Nota : estas dos palabras clave async/awaitse introdujeron en la versión más reciente de JavaScript (ES8). Es posible que algunos navegadores antiguos no admitan el uso de async / await. Para obtener más información, visite JavaScript async / await browser support.
