Objeto Promise de TypeScript: Gestión de operaciones asíncronas

Las Promises en TypeScript son uno de esos conceptos fundamentales que, si bien parecen sencillos en un principio, pueden llegar a generar cierta confusión cuando se trata de implementar asincronía en nuestros proyectos. Al igual que en JavaScript, en TypeScript las Promises son esenciales para gestionar operaciones asíncronas, permitiendo que nuestro código siga ejecutándose mientras se espera el resultado de una operación.

¿Qué es una Promise en TypeScript y Por Qué es Importante?

Una Promise es un objeto que representa el eventual resultado de una operación asíncrona. Esto significa que, cuando llamamos a una función que devuelve una Promise, no recibimos de inmediato el resultado, sino una "promesa" de que el resultado estará disponible en algún momento en el futuro.

En la programación tradicional, las funciones síncronas devuelven valores de manera inmediata, pero en el mundo asíncrono (piensa en solicitudes HTTP, operaciones de lectura/escritura de archivos, etc.), esperar el resultado bloquearía la ejecución del resto del código. Aquí es donde las Promises son útiles, ya que nos permiten manejar esta espera sin detener el flujo del programa.

🔎 Veamos el siguiente ejemplo:


let myPromise: Promise<number> = new Promise((resolve, reject) => {
    // Simulamos una operación asincrónica, como una llamada a una API
    setTimeout(() => {
        const success = true; // Simulamos un resultado exitoso
        if (success) {
            resolve(42); // La operación se completó exitosamente
        } else {
            reject("Error al obtener el dato."); // La operación falló
        }
    }, 1000); // La operación tarda 1 segundo en completarse
});

En este ejemplo, "myPromise" representa una promesa de que, después de 1 segundo, el valor 42 estará disponible si todo sale bien. Si hay un problema, la promesa será rechazada y se ejecutará el "reject" con un mensaje de error.

Estados de una Promise

Las Promises pueden estar en uno de tres estados:

* Pending (pendiente): El estado inicial, cuando la promesa aún no ha sido cumplida ni rechazada.

* Fulfilled (cumplida): La operación se ha completado exitosamente, y tenemos un valor.

* Rejected (rechazada): Hubo un error, y la operación no se completó como esperábamos.

Es importante entender estos estados porque, cuando gestionamos Promises, el estado de la misma determinará cómo vamos a trabajar con su resultado o su error.

🔎 Veamos el siguiente ejemplo:

myPromise.then((value) => {
    console.log("Promesa cumplida con valor:", value);
}).catch((error) => {
    console.error("Promesa rechazada con error:", error);
});

Aquí, "then" se ejecuta si la promesa es cumplida, mientras que "catch" se ejecuta si la promesa es rechazada. Este tipo de sintaxis es más limpio que las viejas "callbacks" anidadas que solíamos usar en JavaScript antes de que existieran las Promises, y ayuda a mejorar la legibilidad del código.

Ventajas de las Promises sobre Callbacks

Antes de la llegada de las Promises, los desarrolladores usaban callbacks para gestionar las operaciones asíncronas. Si bien las callbacks son funcionales, su uso puede volverse rápidamente complejo y difícil de leer, especialmente cuando se tienen múltiples niveles de asincronía. Esto lleva a lo que se conoce como "callback hell" o el infame "piramideo de callbacks".

🚨 Ejemplo de callbacks anidados:

// Ejemplo de callback hell en JavaScript
firstFunction((result) => {
    secondFunction(result, (newResult) => {
        thirdFunction(newResult, (finalResult) => {
            console.log(finalResult);
        });
    });
});

Con Promises, podemos evitar estos problemas encadenando los resultados de las operaciones de manera más clara y estructurada:

🔎 Mismo ejemplo usando Promises:

myPromise
    .then(firstFunction)
    .then(secondFunction)
    .then(thirdFunction)
    .catch((error) => console.error(error));

Este estilo de encadenamiento es mucho más limpio y TypeScript, con su tipado estático, ofrece aún más seguridad al evitar errores comunes durante el manejo de resultados y errores.

Ejemplo Práctico de una Promise en TypeScript

Imaginemos que queremos hacer una llamada a una API para obtener datos de un usuario y, basándonos en esos datos, actualizar la interfaz de nuestra aplicación. En lugar de bloquear la interfaz hasta que los datos lleguen, usamos una Promise para gestionar la respuesta.

🔎 Código del ejemplo:

function fetchUserData(userId: number): Promise<string> {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            if (userId === 1) {
                resolve("Datos del usuario obtenidos: Raistlin Majere");
            } else {
                reject("Error: Usuario no encontrado");
            }
        }, 2000); // Simulamos un retraso de 2 segundos
    });
}

fetchUserData(1)
    .then((userData) => {
        console.log(userData); // "Datos del usuario obtenidos: Raistlin Majere"
    })
    .catch((error) => {
        console.error(error); // Si falla
    });
    

En este ejemplo, "fetchUserData" devuelve una Promise que simula una llamada a una API. Si el "userId" es 1, la promesa se cumple y devuelve los datos del usuario; de lo contrario, la promesa es rechazada.

Gestión de Errores en Promises: Una Reflexión

Es común que al principio, muchos desarrolladores se confundan sobre cómo manejar correctamente los errores en Promises. Aquí es donde suele haber más dudas, ya que algunos optan por agregar múltiples "catch", lo que puede complicar innecesariamente el flujo del código.

Una de las mejores prácticas es tener un solo bloque "catch" para capturar todos los posibles errores en una cadena de Promises, evitando duplicaciones innecesarias:

🔎 Veamos el siguiente ejemplo:

    myPromise
    .then((value) => {
        console.log("Valor:", value);
        return secondPromise();
    })
    .then((secondValue) => {
        console.log("Segundo valor:", secondValue);
    })
    .catch((error) => {
        console.error("Error en alguna parte:", error);
    });
    

Este enfoque garantiza que cualquier error en cualquier punto de la cadena de Promises sea capturado adecuadamente, evitando que se desperdicie un posible error sin manejar.

Buenas Prácticas al Usar Promises en TypeScript

Al trabajar con Promises en TypeScript, existen algunas recomendaciones clave que es importante tener en cuenta:

* Siempre gestionar errores: Es fácil olvidar un "catch", lo que puede llevar a errores no capturados en producción. Asegúrate de siempre tener un "catch" para manejar posibles rechazos.

* Evitar Promises innecesarias: No todas las operaciones necesitan ser envueltas en una Promise. Usa Promises sólo cuando estés lidiando con operaciones asíncronas.

* Encadenar Promises de manera eficiente: Evita hacer múltiples operaciones asíncronas en paralelo si no es necesario. Encadenar Promises te permite mantener un flujo más controlado.

Conclusión

El Objeto Promise de TypeScript es una herramienta poderosa para manejar operaciones asíncronas de manera clara y estructurada. A lo largo de este artículo, hemos visto cómo las Promises ayudan a evitar el caos de los callbacks y cómo podemos implementar buenas prácticas para un manejo adecuado de la asincronía.

Entender el ciclo de vida de una Promise y cómo gestionar errores correctamente es clave para dominar este concepto en proyectos reales. ¿Te has encontrado con situaciones donde no manejaste bien una Promise? Tal vez ahora puedas reflexionar sobre esos casos y aplicar las mejoras que aquí hemos explorado.

Si te interesa profundizar más en este tema, te recomiendo que explores los async/await, que hacen el trabajo con Promises aún más sencillo.

¡No te pierdas el siguiente post!

Saludos.

Buscar este blog

Universo Java