Async/await en JavaScript

En este artículo, explicaremos async/await en JavaScript.

YouTube Video

Async/await en JavaScript

async (y await) en JavaScript son características diseñadas para hacer que escribir operaciones asíncronas sea más intuitivo y legible. Al usar esto, puedes reducir la complejidad de las funciones de devolución de llamada tradicionales y las cadenas de Promise, y escribir código asíncrono de una forma que parece código síncrono.

Función async

async se utiliza para definir una función como una función asíncrona. Una función async siempre devuelve una Promesa. Dentro de una función marcada con async, puedes usar await para esperar el resultado de una Promesa.

Sintaxis Básica de una Función async

1async function myAsyncFunction() {
2    // Write asynchronous processing here
3    return 'Result';  // Return a Promise
4}

En este caso, llamar a myAsyncFunction() devuelve automáticamente un objeto de Promesa. Cuando se resuelve la Promesa, su resultado se convierte en el valor devuelto por return.

Ejemplo: Función async Básica

1async function greet() {
2    return 'Hello, World!';
3}
4
5greet().then((message) => {
6    console.log(message);  // Displays "Hello, World!"
7});

await

await se utiliza para esperar a que una Promesa sea resuelta. Al usar await, puedes pausar la ejecución hasta que la Promesa sea resuelta y recibir su resultado. await solo se puede utilizar dentro de una función async.

Ejemplo: Cómo Usar await

 1async function fetchData() {
 2    // Wait for the result of the Promise
 3    const data = await fetch('https://codesparklab.com/json/example.json');
 4    // Wait for the asynchronous operation to complete
 5    const jsonData = await data.json();
 6    // Retrieve and display the data
 7    console.log(jsonData);
 8}
 9
10fetchData();

En el ejemplo anterior, espera la Promesa devuelta por la función fetch con await, y luego realiza más operaciones asíncronas utilizando el resultado.

Manejo de Errores con async/await

Si ocurre un error dentro de una función async, ese error se trata como un reject de la Promesa. Puedes usar sentencias try...catch para gestionar errores.

Ejemplo: Manejo de Errores

 1async function fetchData() {
 2    try {
 3        // Invalid URL
 4        const data = await fetch('https://invalid.codesparklab.com/');
 5        const jsonData = await data.json();
 6        console.log(jsonData);
 7    } catch (error) {
 8        // Catch the error
 9        console.error('Failed to fetch data:', error);
10    }
11}
12
13fetchData();

Usar un bloque try...catch te permite capturar errores que ocurren durante operaciones asíncronas, evitando que el programa se bloquee si ocurren errores.

Beneficios de async/await

En comparación con las cadenas de Promise tradicionales, async/await ofrece las siguientes ventajas:.

• Mayor legibilidad
  • El procesamiento asíncrono puede escribirse como código síncrono, evitando la complejidad de las cadenas de Promise y los callbacks profundamente anidados.
• Depuración más sencilla
  • Como se parece al código síncrono, la depuración y el manejo de errores se vuelven más fáciles.
• Mejor mantenibilidad
  • Los procesos asíncronos pueden escribirse de manera más simple, lo que facilita el cambio o modificación del código y mejora la mantenibilidad a largo plazo.

Ejemplo: cadena de Promise vs async/await

Comparemos el código usando cadenas de Promise y el código usando async/await.

 1// Code using Promise chains
 2function fetchDataPromise() {
 3    fetch('https://codesparklab.com/json/example.json')
 4        .then((response) => response.json())
 5        .then((data) => {
 6            console.log(data);
 7        })
 8    .catch((error) => {
 9        console.error('Failed to fetch data:', error);
10    });
11}
12
13// Code using async/await
14async function fetchDataAsync() {
15    try {
16        const response = await fetch('https://codesparklab.com/json/example.json');
17        const data = await response.json();
18        console.log(data);
19    } catch (error) {
20        console.error('Failed to fetch data:', error);
21    }
22}

Como puedes ver, usar async/await te permite escribir procesos asíncronos de manera lineal, lo que da como resultado un código más legible.

Ejecutar múltiples operaciones asincrónicas simultáneamente

Combinando Promise.all() o Promise.race() con await, puedes ejecutar varias operaciones asíncronas simultáneamente y manejar sus resultados de manera conjunta.

Promise.all()

 1async function fetchMultipleData() {
 2    try {
 3        const [data1, data2] = await Promise.all([
 4            fetch('https://codesparklab.com/json/example1.json'),
 5            fetch('https://codesparklab.com/json/example2.json')
 6        ]);
 7        const jsonData1 = await data1.json();
 8        const jsonData2 = await data2.json();
 9        console.log(jsonData1);
10        console.log(jsonData2);
11    } catch (error) {
12        console.error('Failed to fetch data:', error);
13    }
14}
15
16fetchMultipleData();

• Promise.all() resuelve múltiples Promesas simultáneamente y devuelve sus resultados en forma de un arreglo. Espera a que todas las Promesas se resuelvan, y si alguna de ellas falla, se considera un fallo general.

Promise.race()

 1async function fetchFastestData() {
 2    try {
 3        const fastestResponse = await Promise.race([
 4            fetch('https://codesparklab.com/json/example1.json'),
 5            fetch('https://codesparklab.com/json/example2.json')
 6        ]);
 7        const jsonData = await fastestResponse.json();
 8        console.log('Fastest data:', jsonData);
 9    } catch (error) {
10        console.error('Fetch error:', error);
11    }
12}
13
14fetchFastestData();

• Promise.race() devuelve el resultado de la primera promesa que se cumple o se rechaza. Es útil cuando deseas responder a la operación asíncrona que termine primero. Sin embargo, si la primera promesa falla, el error es capturado inmediatamente por catch.

Promise.allSettled()

 1async function fetchWithAllSettled() {
 2    const results = await Promise.allSettled([
 3        // This URL will success
 4        fetch('https://codesparklab.com/json/example1.json'),
 5        // This URL will fail
 6        fetch('https://invalid.codesparklab.com/')
 7    ]);
 8
 9    results.forEach((result, index) => {
10        if (result.status === 'fulfilled') {
11            const url = result.value.url;
12            console.log(`Request ${index + 1} succeeded:`, url);
13        } else {
14            const reason = result.reason;
15            console.warn(`Request ${index + 1} failed:`, reason);
16        }
17    });
18}
19
20fetchWithAllSettled();

• Promise.allSettled() espera a todos los resultados, sin importar si son éxitos o fracasos. Cada resultado se devuelve en la forma de { status, value } o { status, reason }, lo que te permite determinar qué promesas tuvieron éxito y cuáles fallaron.

Promise.any()

 1async function fetchAnySuccessful() {
 2    try {
 3        const firstSuccessful = await Promise.any([
 4            // This URL will fail
 5            fetch('https://invalid.codesparklab.com/'),
 6            // This URL will success
 7            fetch('https://codesparklab.com/json/example1.json')
 8        ]);
 9        const jsonData = await firstSuccessful.json();
10        console.log('First successful response:', jsonData);
11    } catch (error) {
12        console.error('All fetch requests failed:', error);
13    }
14}
15
16fetchAnySuccessful();

• Promise.any() devuelve solo el resultado de la primera promesa cumplida con éxito. Se lanza una excepción solo si todas las promesas fallan. Se puede utilizar como un mecanismo de reintento en entornos donde algunas APIs no son confiables hasta que una tenga éxito.

Resumen

• Función async: Siempre devuelve una Promesa y se utiliza para escribir procesamiento asíncrono.
• await: Se utiliza para esperar a que una Promesa se resuelva y recibir su resultado.
• Manejo de errores: Usa try...catch para manejar errores que ocurren durante el procesamiento asíncrono.
• Múltiples operaciones asíncronas: Usando métodos como Promise.all(), puedes ejecutar varias tareas asíncronas simultáneamente.

async/await son herramientas poderosas para manejar el procesamiento asíncrono, así que asegúrate de utilizarlas para simplificar la lógica asíncrona compleja.

Puedes seguir el artículo anterior utilizando Visual Studio Code en nuestro canal de YouTube. Por favor, también revisa nuestro canal de YouTube.

YouTube Video