Async/await en TypeScript

Este artículo explica async/await en TypeScript.

YouTube Video

Async/await en TypeScript

En TypeScript, async es una palabra clave para describir de forma concisa operaciones asíncronas y se comporta de manera similar a la sintaxis async/await de JavaScript. Las funciones async están diseñadas para hacer que el manejo de funciones que retornan Promesas sea más intuitivo.

Conceptos básicos de las funciones async

Las funciones declaradas con la palabra clave async siempre retornan una Promise. Aquí hay un ejemplo básico:.

1async function fetchData(): Promise<string> {
2    return "Data received";
3}
4
5fetchData().then((data) => console.log(data)); // "Data received"

En este ejemplo, debido a que la función async siempre retorna una Promise, el valor retornado se resuelve automáticamente usando Promise.resolve. En otras palabras, "Data received" se convierte en una Promise<string> y es tratada como una operación asíncrona.

La palabra clave await

La palabra clave await solo puede usarse dentro de una función async. Esto permite pausar y esperar el resultado de una Promise antes de continuar con la ejecución de la función.

En el siguiente ejemplo, el procesamiento asíncrono usando fetch se escribe con async/await.

 1async function getUserData() {
 2    try {
 3        const response = await fetch("https://codesparklab.com/json/example.json");
 4        const data = await response.json();
 5        console.log(data);
 6    } catch (error) {
 7        console.error("Error fetching user data:", error);
 8    }
 9}
10
11getUserData();

En este ejemplo, se utiliza await para esperar la finalización de la Promise retornada por la función fetch, y su resultado se asigna a la variable response. Además, también se espera el resultado de response.json().

Manejo de errores con async/await

Los errores que ocurren durante el procesamiento asíncrono se pueden capturar utilizando la sintaxis estándar de try...catch. Si ocurre un error en la parte await, ese error se maneja en el bloque catch.

 1async function fetchDataWithErrorHandling() {
 2    try {
 3        const response = await fetch('https://invalid.codesparklab.com/');
 4        if (!response.ok) {
 5            throw new Error(`HTTP error! status: ${response.status}`);
 6        }
 7        const data = await response.json();
 8        console.log(data);
 9    } catch (error) {
10        console.error("Fetch error:", error);
11    }
12}
13
14fetchDataWithErrorHandling();

En el ejemplo anterior, el resultado de la función fetch se espera utilizando await, y si ocurre un error, se maneja con try...catch.

Ventajas de async/await

1. Procesamiento asíncrono intuitivo: Al usar async/await, el flujo del código es más intuitivo que al usar cadenas de Promise (then o catch), permitiendo que se escriba como si fuera procesamiento sincrónico.

2. Manejo de errores fácil: Usar try...catch simplifica el manejo de errores en operaciones asíncronas. Puedes escribir un código más legible que al usar cadenas de Promise.

Valores de retorno de las funciones async

Una función async siempre devuelve un Promise. Por lo tanto, incluso sin devolver explícitamente un Promise, el procesamiento asincrónico es posible utilizando la palabra clave async.

1async function example() {
2    return 42;
3}
4
5example().then((result) => console.log(result)); // 42

En el código anterior, se devuelve un valor sincrónico 42, pero como está dentro de una función async, se convierte automáticamente en Promise.resolve(42).

Ejecución Secuencial de Funciones Asincrónicas

Al ejecutar varias funciones asincrónicas sucesivamente, puedes usar await para controlar su orden.

 1async function fetchData(url: string): Promise<any> {
 2    try {
 3        const response = await fetch(url);
 4        return await response.json();
 5    } catch (error) {
 6        console.error("Error fetching user data:", error);
 7    }
 8}
 9
10async function fetchData1(): Promise<any> {
11    return await fetchData("https://codesparklab.com/json/example.json");
12}
13
14async function fetchData2(): Promise<any> {
15    return await fetchData("https://codesparklab.com/json/example2.json");
16}
17
18async function processData() {
19    const data1 = await fetchData1();
20    console.log(data1);
21
22    const data2 = await fetchData2();
23    console.log(data2);
24}
25
26processData();

En este ejemplo, fetchData2 se ejecuta después de esperar a que fetchData1 se complete. Esto es más legible en comparación con el uso de una cadena de Promise.

Ejecución Paralela

Si deseas ejecutar operaciones asincrónicas en paralelo, puedes usar Promise.all para manejar múltiples Promises simultáneamente.

 1async function fetchData(url: string): Promise<any> {
 2    try {
 3        const response = await fetch(url);
 4        return await response.json();
 5    } catch (error) {
 6        console.error("Error fetching user data:", error);
 7    }
 8}
 9
10async function fetchData1(): Promise<any> {
11    return await fetchData("https://codesparklab.com/json/example.json");
12}
13
14async function fetchData2(): Promise<any> {
15    return await fetchData("https://codesparklab.com/json/example2.json");
16}
17
18async function fetchMultipleData() {
19    const [data1, data2] = await Promise.all([fetchData1(), fetchData2()]);
20    console.log(data1);
21    console.log(data2);
22}
23
24fetchMultipleData();

En este caso, fetchData1 y fetchData2 se ejecutan al mismo tiempo, y el proceso continúa después de que ambos se resuelvan. Esto permite manejar eficientemente múltiples operaciones asincrónicas.

Resumen

• Una función async devuelve un Promise, y al usar la palabra clave await, puedes esperar el resultado de una operación asincrónica.
• Al usar try...catch, el manejo de errores en operaciones asincrónicas se vuelve más sencillo.
• Al usar Promise.all, es posible ejecutar múltiples operaciones asincrónicas en paralelo.

async/await se utiliza ampliamente en TypeScript y JavaScript porque permite una descripción más simple de las operaciones asincrónicas.

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