Articles
Introductie tot TypeScript
De Promise-klasse in TypeScript

De Promise-klasse in TypeScript

Dit artikel legt de Promise-klasse in TypeScript uit.

YouTube Video

Belofte

De Promise-klasse in TypeScript is in feite hetzelfde als Promise in JavaScript. Een Promise is een ingebouwde klasse voor het afhandelen van asynchrone operaties en vertegenwoordigt het resultaat van een asynchrone operatie wanneer deze voltooid is. Hier leggen we het basisgebruik van Promises en gerelateerde concepten uit.

Basisgebruik

Een Promise maken:

Een Promise-object wordt gebruikt om asynchrone operaties in te kapselen. Een Promise wordt gemaakt met new Promise(executor) en voert asynchrone operaties binnenin uit. De executor neemt twee functies, resolve en reject, als argumenten.

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});

Een Promise gebruiken:

De gemaakte Promise wordt verwerkt met behulp van then() en 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()-methode 

 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});
  • De finally()-methode definieert code die altijd wordt uitgevoerd, ongeacht of de Promise is vervuld of afgewezen.

Promises koppelen:

Door then() na then() te koppelen, kun je meerdere asynchrone operaties achter elkaar verbinden.

 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 kun je Promises eenvoudiger afhandelen met behulp van async/await. Binnen een async-functie kun je het await-trefwoord gebruiken om te wachten op het resultaat van een 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();

Promise-methoden

Promise.all()

Promise.all voert meerdere Promises gelijktijdig uit en wacht tot ze allemaal zijn vervuld.

 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() wordt alleen aangeroepen wanneer alle Promises zijn vervuld. catch() wordt aangeroepen als er zelfs maar één faalt.

Promise.race()

Promise.race geeft het resultaat terug van de eerste Promise die voltooid is, van meerdere Promises.

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});
  • Zoals in dit voorbeeld wordt het resultaat van de eerste Promise die voltooid is, teruggegeven.

Promise.allSettled()

Promise.allSettled wacht tot alle Promises zijn voltooid en geeft een array met alle resultaten terug, inclusief zowel vervulde als afgewezen resultaten.

 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() wordt aangeroepen zodra alle Promises zijn voltooid (zowel vervuld als afgewezen). Elk resultaat bevat een status-eigenschap ('fulfilled' of 'rejected'). Fouten hebben geen invloed op de andere operaties.

Promise.any()

Promise.any wacht tot de eerste Promise is vervuld en geeft deze terug.

 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    });
  • Het retourneert de eerste vervulde waarde van meerdere Promises.

Samenvatting

Door TypeScript te gebruiken, kun je de types van Promises correct specificeren, waardoor je meer typeveilige programma's kunt schrijven. Dit helpt om fouten vroegtijdig tijdens het ontwikkelen op te sporen door van tevoren het type waarde dat een Promise retourneert te specificeren.

Je kunt het bovenstaande artikel volgen met Visual Studio Code op ons YouTube-kanaal. Bekijk ook het YouTube-kanaal.

YouTube Video

Foutafhandeling in TypeScript