Introducción

En este tema, aprenderemos sobre async y await, dos palabras clave que facilitan el trabajo con código asíncrono en TypeScript. Estas características permiten escribir código asíncrono que se lee y se comporta de manera similar al código síncrono, lo que hace que sea más fácil de entender y mantener.

Conceptos Clave

Funciones Asíncronas (async):
- Una función marcada con async siempre devuelve una promesa.
- Dentro de una función async, puedes usar la palabra clave await para esperar a que una promesa se resuelva.
await:
- await solo puede ser usado dentro de funciones async.
- Pausa la ejecución de la función async y espera a que la promesa se resuelva o rechace.

Ejemplo Básico

Veamos un ejemplo básico para entender cómo funcionan async y await:

// Simula una operación asíncrona usando una promesa
function delay(ms: number) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

// Función asíncrona que usa await
async function asyncFunction() {
    console.log('Inicio');
    await delay(2000); // Espera 2 segundos
    console.log('Fin');
}

asyncFunction();

Explicación del Código

Función delay:
- Esta función devuelve una promesa que se resuelve después de un tiempo especificado (en milisegundos).
Función asyncFunction:
- La función está marcada con async, lo que significa que devolverá una promesa.
- Usa await para esperar a que la promesa devuelta por delay se resuelva antes de continuar con la ejecución.

Ejemplo Práctico: Llamadas a APIs

Vamos a ver un ejemplo más práctico donde hacemos una llamada a una API usando fetch y async/await.

// Función asíncrona para obtener datos de una API
async function fetchData(url: string) {
    try {
        const response = await fetch(url);
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        const data = await response.json();
        return data;
    } catch (error) {
        console.error('Fetch error:', error);
    }
}

// Uso de la función fetchData
async function main() {
    const url = 'https://jsonplaceholder.typicode.com/posts/1';
    const data = await fetchData(url);
    console.log(data);
}

main();

Explicación del Código

Función fetchData:
- Usa fetch para hacer una llamada a la API.
- await se usa para esperar a que la promesa de fetch se resuelva.
- Si la respuesta no es correcta (response.ok), lanza un error.
- Usa await nuevamente para esperar a que la promesa de response.json() se resuelva y devuelva los datos.
Función main:
- Llama a fetchData y espera a que se resuelva antes de imprimir los datos.

Ejercicio Práctico

Ejercicio

Crea una función asíncrona que haga una llamada a la API de GitHub para obtener información sobre un usuario específico y luego imprima el nombre del usuario y el número de repositorios públicos.

async function getGitHubUserInfo(username: string) {
    // Tu código aquí
}

// Llama a la función con un nombre de usuario de GitHub
getGitHubUserInfo('octocat');

Solución

async function getGitHubUserInfo(username: string) {
    const url = `https://api.github.com/users/${username}`;
    try {
        const response = await fetch(url);
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        const data = await response.json();
        console.log(`Nombre: ${data.name}`);
        console.log(`Repositorios Públicos: ${data.public_repos}`);
    } catch (error) {
        console.error('Fetch error:', error);
    }
}

// Llama a la función con un nombre de usuario de GitHub
getGitHubUserInfo('octocat');

Explicación de la Solución

Construcción de la URL:
- La URL se construye usando el nombre de usuario proporcionado.
Llamada a la API:
- fetch se usa para hacer la llamada a la API de GitHub.
- await se usa para esperar a que la promesa de fetch se resuelva.
Manejo de Errores:
- Si la respuesta no es correcta, se lanza un error.
- Se captura cualquier error y se imprime en la consola.
Impresión de Datos:
- Se imprimen el nombre del usuario y el número de repositorios públicos.

Conclusión

En esta sección, hemos aprendido cómo async y await pueden simplificar el manejo de código asíncrono en TypeScript. Hemos visto ejemplos básicos y prácticos, y hemos realizado un ejercicio para reforzar los conceptos. Ahora deberías sentirte más cómodo trabajando con promesas y funciones asíncronas en TypeScript.

En el próximo módulo, profundizaremos en herramientas y mejores prácticas para trabajar con TypeScript en proyectos reales.

Async/Await

Introducción

Conceptos Clave

Ejemplo Básico

Explicación del Código

Ejemplo Práctico: Llamadas a APIs

Explicación del Código

Ejercicio Práctico

Ejercicio

Solución

Explicación de la Solución

Conclusión

Curso de TypeScript

Módulo 1: Introducción a TypeScript

Módulo 2: Trabajando con Tipos

Módulo 3: Tipos Avanzados

Módulo 4: Funciones y Módulos

Módulo 5: Programación Asíncrona

Módulo 6: Herramientas y Mejores Prácticas

Módulo 7: Temas Avanzados