Classe Promise in TypeScript
Questo articolo spiega la classe Promise in TypeScript.
YouTube Video
Promise
La classe Promise in TypeScript è fondamentalmente la stessa della Promise in JavaScript. Una Promise è una classe integrata per gestire operazioni asincrone, rappresentando il risultato di un'operazione asincrona al suo completamento. Qui spieghiamo l'uso base delle Promises e i concetti correlati.
Uso di base
Creare una Promise:
Un oggetto Promise viene utilizzato per incapsulare operazioni asincrone. Una Promise viene creata con new Promise(executor), ed esegue operazioni asincrone al suo interno. L'executor prende due funzioni, resolve e reject, come argomenti.
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});Usare una Promise:
La Promise creata viene gestita usando then() e 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});Metodo 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});- Il metodo
finally()definisce un codice che verrà sempre eseguito, indipendentemente dal fatto che laPromisesia stata risolta oppure respinta.
Collegare Promises in Catena:
Collegando then() dopo then(), è possibile concatenare più operazioni asincrone in 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:
In TypeScript, puoi gestire le Promises in modo più diretto usando async/await. All'interno di una funzione async, puoi usare la parola chiave await per aspettare il risultato di una Promise.
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();Metodi di Promise
Promise.all()
Promise.all esegue più Promesse contemporaneamente e attende che tutte siano risolte.
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()viene chiamato solo quando tutte lePromisessono state risolte.catch()viene chiamato anche se solo una fallisce.
Promise.race()
Promise.race restituisce il risultato della prima Promise che viene completata tra più Promesse.
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});- Come in questo esempio, viene restituito il risultato della prima
Promiseche si completa.
Promise.allSettled()
Promise.allSettled aspetta che tutte le Promesse si concludano e restituisce un array con tutti i risultati, sia risolti che respinti.
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()viene chiamato quando tutte lePromisessono state completate (sia risolte che respinte). Ogni risultato include una proprietàstatus('fulfilled'o'rejected'). I fallimenti non influenzano le altre operazioni.
Promise.any()
Promise.any attende che la prima Promise venga risolta e la restituisce.
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 });- Restituisce il primo valore risolto tra più
Promises.
Riepilogo
Utilizzando TypeScript, è possibile specificare i tipi di Promises in modo appropriato, permettendo di scrivere programmi più sicuri a livello di tipi. Questo aiuta ad individuare errori presto durante lo sviluppo specificando in anticipo il tipo di valore che una Promise restituisce.
Puoi seguire l'articolo sopra utilizzando Visual Studio Code sul nostro canale YouTube. Controlla anche il nostro canale YouTube.