Articles
Introducción a TypeScript
Clase Promise en TypeScript

Clase Promise en TypeScript

Este artículo explica la clase Promise en TypeScript.

YouTube Video

Promesa

La clase Promise en TypeScript es básicamente la misma que Promise en JavaScript. Una Promise es una clase integrada para manejar operaciones asíncronas, representando el resultado de una operación asíncrona cuando se completa. Aquí explicamos el uso básico de Promises y conceptos relacionados.

Uso básico

Creación de una Promesa:

Un objeto Promise se utiliza para envolver operaciones asíncronas. Se crea una Promise con new Promise(executor), y ejecuta operaciones asíncronas dentro de ella. El executor recibe dos funciones, resolve y reject, como argumentos.

1const myPromise = new Promise<number>((resolve, reject) => {
2    // Perform asynchronous operations
3    const success = true; // This is just an example
4    if (success) {
5        resolve(42); // In case of success
6    } else {
7        reject('Failed'); // In case of failure
8    }
9});

Uso de una Promesa:

La Promise creada se procesa utilizando then() y catch().

1myPromise.then((value) => {
2    console.log(`Success: ${value}`); // Process the value passed with resolve
3}).catch((error) => {
4    console.error(`Error: ${error}`); // Handle the error passed with reject
5});

Método finally() 

 1const myPromise = new Promise<number>((resolve, reject) => {
 2    // Perform asynchronous operations
 3    const success = false; // This is just an example
 4    if (success) {
 5        resolve(42); // In case of success
 6    } else {
 7        reject('Failed'); // In case of failure
 8    }
 9});
10
11myPromise.then((value) => {
12    console.log(`Success: ${value}`); // Process the value passed with resolve
13}).catch((error) => {
14    console.error(`Error: ${error}`); // Handle the error passed with reject
15}).finally(() => {
16    console.log('The operation has completed');
17});
  • El método finally() define un código que siempre se ejecutará sin importar si la Promise se resuelve o se rechaza.

Encadenamiento de Promesas:

Encadenando then() tras then(), puedes conectar múltiples operaciones asíncronas en serie.

 1const myPromise = new Promise<number>((resolve, reject) => {
 2    // Perform asynchronous operations
 3    const success = true; // This is just an example
 4    if (success) {
 5        resolve(42); // In case of success
 6    } else {
 7        reject('Failed'); // In case of failure
 8    }
 9});
10
11myPromise
12    .then((value) => {
13        console.log(`Success: ${value}`);
14        return value + 1; // Pass the value to the next then
15    })
16    .then((newValue) => {
17        console.log(`New value: ${newValue}`);
18    })
19    .catch((error) => {
20        console.error(`Error: ${error}`);
21    });

async/await:

En TypeScript, puedes manejar las Promesas de forma más sencilla utilizando async/await. Dentro de una función async, puedes usar la palabra clave await para esperar el resultado de una Promesa.

 1const myPromise = new Promise<number>((resolve, reject) => {
 2    // Perform asynchronous operations
 3    const success = true; // This is just an example
 4    if (success) {
 5        resolve(42); // In case of success
 6    } else {
 7        reject('Failed'); // In case of failure
 8    }
 9});
10
11async function asyncFunction() {
12    try {
13        const value = await myPromise;
14        console.log(`Success: ${value}`);
15    } catch (error) {
16        console.error(`Error: ${error}`);
17    }
18}
19
20asyncFunction();

Métodos de Promise

Promise.all()

Promise.all ejecuta varias Promesas de forma concurrente y espera hasta que todas se hayan cumplido.

 1const promise1 = Promise.resolve(1);
 2const promise2 = Promise.resolve(2);
 3const promise3 = Promise.resolve(3);
 4
 5Promise.all([promise1, promise2, promise3])
 6    .then((results) => {
 7        console.log(results);  // [1, 2, 3]
 8    })
 9    .catch((error) => {
10        console.error('Error :', error);
11    });
  • then() se llama solo cuando todas las Promises se han cumplido. catch() se llama si incluso una falla.

Promise.race()

Promise.race devuelve el resultado de la primera Promise que se complete entre varias Promesas.

1const promise1 = new Promise((resolve) => setTimeout(resolve, 100, 'First'));
2const promise2 = new Promise((resolve) => setTimeout(resolve, 500, 'Second'));
3
4Promise.race([promise1, promise2]).then((result) => {
5    console.log(result);  // "First"
6});
  • Como en este ejemplo, se devuelve el resultado de la primera Promise que se complete.

Promise.allSettled()

Promise.allSettled espera a que todas las Promesas finalicen y devuelve un arreglo con todos los resultados, tanto cumplidas como rechazadas.

 1const promise1 = Promise.resolve(1);
 2const promise2 = Promise.reject("Failed");
 3const promise3 = Promise.resolve(3);
 4
 5Promise.allSettled([promise1, promise2, promise3])
 6    .then((results) => {
 7        results.forEach(result => console.log(result));
 8        // [
 9        //   { status: 'fulfilled', value: 1 },
10        //   { status: 'rejected', reason: 'Failed' },
11        //   { status: 'fulfilled', value: 3 }
12        // ]
13    });
  • then() se llama una vez que todas las Promises han terminado (ya sean cumplidas o rechazadas). Cada resultado incluye una propiedad status ('fulfilled' o 'rejected'). Las fallas no afectan a las demás operaciones.

Promise.any()

Promise.any espera hasta que la primera Promesa se cumpla y la devuelve.

 1const promise1 = new Promise((resolve) => setTimeout(() => resolve("A ok"), 300));
 2const promise2 = new Promise((_, reject) => setTimeout(() => reject("B fail"), 100));
 3const promise3 = new Promise((resolve) => setTimeout(() => resolve("C ok"), 200));
 4
 5Promise.any([promise1, promise2, promise3])
 6    .then(value => {
 7        // Logs the first fulfilled value ("C ok")
 8        console.log("first fulfilled:", value);
 9    })
10    .catch(err => {
11        console.log("should not reach here in this example:", err);
12    });
  • Devuelve el primer valor cumplido entre varias Promises.

Resumen

Usando TypeScript, puedes especificar los tipos de Promesas de manera adecuada, lo que te permite escribir programas con mayor seguridad de tipos. Esto ayuda a detectar errores temprano durante el desarrollo especificando de antemano el tipo de valor que devuelve una Promesa.

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

Manejo de errores en TypeScript