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 laPromisese 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 lasPromisesse 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
Promiseque 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 lasPromiseshan terminado (ya sean cumplidas o rechazadas). Cada resultado incluye una propiedadstatus('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.