4.1 Palabra clave async
Las funciones asincrónicas en JavaScript permiten escribir código asíncrono que se ve y se lee como si fuera sincrónico.
Las palabras clave async y await, introducidas en ECMAScript 2017 (ES8), facilitan el trabajo con promesas
y hacen que el código sea más comprensible y manejable.
Conceptos básicos
La palabra clave async antes de la declaración de una función indica que la función es asincrónica. Una función
asincrónica siempre devuelve una promesa, incluso si no tiene explícitamente un operador return.
Si la función devuelve un valor, este se envuelve automáticamente en una promesa con ese valor.
Sintaxis:
async function nombre() {
// código de la función
}
Ejemplo:
async function greet() {
return 'Hello, world!';
}
greet().then((message) => {
console.log(message); // Imprimirá: Hello, world!
});
4.2 Palabra clave await
La palabra clave await se utiliza dentro de una función asincrónica para pausar su ejecución hasta que la promesa
se resuelva. await solo puede usarse dentro de funciones declaradas con la palabra clave async.
Sintaxis:
let result = await
promise;
Ejemplo:
function delay(ms) {
return new Promise((resolve) => setTimeout(resolve, ms));
}
async function greet() {
await delay(2000);
return 'Hello, world!';
}
async function displayGreeting() {
const message = await greet();
console.log(message); // Imprimirá: Hello, world! después de 2 segundos
}
displayGreeting();
4.3 Ejemplos de uso de async y await
Ejemplo 1: Función asincrónica con espera de múltiples promesas
function fetchData1() {
return new Promise((resolve) => setTimeout(() => resolve('Data 1'), 1000));
}
function fetchData2() {
return new Promise((resolve) => setTimeout(() => resolve('Data 2'), 2000));
}
async function fetchAllData() {
const data1 = await fetchData1();
console.log(data1); // Imprimirá: Data 1 después de 1 segundo
const data2 = await fetchData2();
console.log(data2); // Imprimirá: Data 2 después de 2 segundos
}
fetchAllData();
Ejemplo 2: Ejecución paralela de operaciones asincrónicas
Para ejecutar varias operaciones asincrónicas en paralelo, se puede utilizar Promise.all() con await.
function fetchData1() {
return new Promise((resolve) => setTimeout(() => resolve('Data 1'), 1000));
}
function fetchData2() {
return new Promise((resolve) => setTimeout(() => resolve('Data 2'), 2000));
}
async function fetchAllData() {
const [data1, data2] = await Promise.all([fetchData1(), fetchData2()]);
console.log(data1); // Imprimirá: Data 1 después de 2 segundos
console.log(data2); // Imprimirá: Data 2 después de 2 segundos
}
fetchAllData();
Ejemplo 3: Manejo de errores usando try...catch
Las funciones asincrónicas permiten usar bloques try...catch para manejar errores, haciendo que el código sea más legible y manejable.
function fetchDataWithError() {
return new Promise((resolve, reject) => setTimeout(() => reject('Error occurred'), 1000));
}
async function fetchData() {
try {
const data = await fetchDataWithError();
console.log(data);
} catch (error) {
console.error('Error:', error); // Imprimirá: Error: Error occurred después de 1 segundo
}
}
fetchData();
Ejemplo 4: Uso de async y await en métodos de clase
Las funciones asincrónicas también se pueden usar dentro de métodos de clases.
class DataFetcher {
async fetchData() {
const data = await new Promise((resolve) => setTimeout(() => resolve('Fetched Data'), 1000));
return data;
}
}
const fetcher = new DataFetcher();
fetcher.fetchData().then((data) => {
console.log(data); // Imprimirá: Fetched Data después de 1 segundo
});
Ejemplo 5: Iteradores asincrónicos
Los iteradores asincrónicos permiten trabajar con flujos de datos que llegan de manera asincrónica.
async function* asyncGenerator() {
let i = 0;
while (i < 3) {
await new Promise((resolve) => setTimeout(resolve, 1000));
yield i++;
}
}
async function iterateAsyncGenerator() {
for await (let value of asyncGenerator()) {
console.log(value); // Imprimirá 0, 1 y 2 con un intervalo de 1 segundo
}
}
iterateAsyncGenerator();
GO TO FULL VERSION