Klasa Promise w TypeScript
W tym artykule wyjaśniamy klasę Promise w TypeScript.
YouTube Video
Promise
Klasa Promise w TypeScript jest zasadniczo taka sama jak Promise w JavaScript. Promise to wbudowana klasa do obsługi operacji asynchronicznych, reprezentująca wynik operacji asynchronicznej po jej zakończeniu. Tutaj wyjaśniamy podstawowe zastosowania Promises oraz związane z nimi pojęcia.
Podstawowe użycie
Tworzenie Promise:
Obiekt Promise jest używany do opakowywania operacji asynchronicznych. Promise tworzy się za pomocą new Promise(executor), wykonując wewnątrz niego operacje asynchroniczne. „executor” przyjmuje dwie funkcje, „resolve” i „reject”, jako argumenty.
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});Korzystanie z Promise:
Stworzony Promise jest obsługiwany za pomocą metod then() i 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});finally() metoda
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});- Metoda
finally()definiuje kod, który zostanie wykonany niezależnie od tego, czyPromisezostanie spełniony, czy odrzucony.
Łączenie Promises:
Łącząc then() po then(), można połączyć wiele operacji asynchronicznych w szereg.
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:
W TypeScript można obsługiwać Promises w sposób bardziej bezpośredni, używając async/await. W funkcji oznaczonej jako async można użyć słowa kluczowego await, aby poczekać na wynik 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();Metody Promise
Promise.all()
Promise.all wykonuje wiele obietnic jednocześnie i czeka, aż wszystkie zostaną spełnione.
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()jest wywoływane tylko wtedy, gdy wszystkiePromiseszostaną spełnione.catch()jest wywoływane, jeśli choć jedna z obietnic zakończy się niepowodzeniem.
Promise.race()
Promise.race zwraca wynik pierwszej Promise, która zakończy się spośród wielu obietnic.
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});- Tak jak w tym przykładzie, zwracany jest wynik pierwszej obietnicy, która się zakończy.
Promise.allSettled()
Promise.allSettled czeka, aż wszystkie obietnice się zakończą, i zwraca tablicę wyników, zarówno spełnionych, jak i odrzuconych.
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()jest wywoływane, gdy wszystkie obietnice zostaną zakończone (spełnione lub odrzucone). Każdy wynik zawiera właściwośćstatus('fulfilled'lub'rejected'). Niepowodzenia nie wpływają na pozostałe operacje.
Promise.any()
Promise.any czeka na spełnienie pierwszej obietnicy i ją zwraca.
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 });- Zwraca pierwszą spełnioną wartość spośród wielu obietnic.
Podsumowanie
Używając TypeScript, można odpowiednio określić typy Promises, co pozwala pisać bardziej bezpieczne typowo programy. Pozwala to na wcześniejsze wychwytywanie błędów podczas tworzenia aplikacji, określając z góry typ wartości zwracanej przez Promise.
Możesz śledzić ten artykuł, korzystając z Visual Studio Code na naszym kanale YouTube. Proszę również sprawdzić nasz kanał YouTube.