Promise-klasse in JavaScript

In dit artikel leggen we de Promise-klasse in JavaScript uit.

YouTube Video

Promise

De Promise-klasse is een klasse voor het afhandelen van asynchrone operaties. Het verwerkt resultaten als de operatie slaagt of fouten als deze mislukt. Traditioneel werden callback-functies gebruikt wanneer je moest wachten tot een asynchrone operatie voltooid was, maar Promise maakt dit duidelijker en krachtiger.

1const promise = new Promise((resolve, reject) => {
2    setTimeout(() => resolve("Done!"), 1000);
3});
4
5// Displays "Done!" after 1 second
6promise.then(result => console.log(result));

• Deze code is een voorbeeld van een asynchroon proces dat "Klaar!" weergeeft na één seconde.
  • Eerst wordt een nieuw Promise-object aangemaakt met behulp van new Promise. Het argument is een functie die twee callbacks accepteert: resolve voor succes en reject voor falen.
  • setTimeout wordt gebruikt om resolve() na één seconde aan te roepen.
  • De then()-methode van het promise-object wacht op voltooiing en toont het resultaat.

Basisstructuur

Een Promise is een object dat uiteindelijk resulteert in ofwel succes ofwel falen.

 1const promise = new Promise((resolve, reject) => {
 2    // Asynchronous operation
 3    // Flag indicating whether the operation was successful
 4    const success = true;
 5
 6    if (success) {
 7        resolve('Operation successful!');
 8    } else {
 9        reject('An error occurred');
10    }
11});

• In het geval van succes wordt resolve() aangeroepen.
• In het geval van falen wordt reject() aangeroepen.

Een Promise-object heeft drie toestanden.

1promise
2    .then((result) => {
3        console.log(result);
4    })
5    .catch((error) => {
6        console.error(error);
7    })

• In behandeling
  • Het asynchrone proces is nog niet voltooid.
• Vervuld
  • Het asynchrone proces is geslaagd, en het resultaat is door resolve() teruggegeven. Het resultaat wordt ontvangen met behulp van de then()-methode.
• Afgewezen
  • Het asynchrone proces is mislukt en er is een fout opgetreden via reject(). De fout wordt opgevangen met behulp van de catch()-methode.

then() en catch() methoden

Met een Promise kun je definiëren wat er moet gebeuren wanneer een asynchrone operatie is voltooid. Hiervoor gebruik je de then() en catch() methoden.

then()

1const promise = new Promise((resolve, reject) => {
2    resolve('Operation successful!');
3});
4
5promise.then((result) => {
6    console.log(result);  // "Operation successful!"
7});

• De then()-methode specificeert een functie die wordt aangeroepen wanneer de Promise slaagt.

catch()

1const promise = new Promise((resolve, reject) => {
2    reject('An error occurred');
3});
4
5promise.catch((error) => {
6    console.error(error);  // "An error occurred"
7});

• De catch()-methode specificeert een functie die wordt aangeroepen wanneer de Promise mislukt.

finally() Methode

 1const promise = new Promise((resolve, reject) => {
 2    resolve('Operation successful!');
 3});
 4
 5promise
 6    .then((result) => {
 7        console.log(result);
 8    })
 9    .catch((error) => {
10        console.error(error);
11    })
12    .finally(() => {
13        console.log('The operation has completed');
14    });

• De finally()-methode definieert code die aan het einde wordt uitgevoerd, ongeacht of de Promise is geslaagd of mislukt.

then()-keten

then() retourneert een nieuwe Promise, zodat je de volgende then() kunt koppelen.

 1const promise = new Promise((resolve, reject) => {
 2    setTimeout(() => {
 3        resolve(1);
 4    }, 1000);
 5});
 6
 7promise
 8    .then(result => {
 9        console.log(result); // 1
10        return result + 1;
11    })
12    .then(result => {
13        console.log(result); // 2
14        return result + 1;
15    })
16    .then(result => {
17        console.log(result); // 3
18    })
19    .catch(error => {
20        console.error(error.message); // Something went wrong
21    });

• In deze code geeft de eerste resolve() de waarde 1 door, en elke waarde die door een then wordt geretourneerd, wordt doorgegeven aan de volgende then.
• Met catch() kun je elke fout die in de keten optreedt op één plek afhandelen.

Praktisch voorbeeld

Bijvoorbeeld, Promises worden vaak gebruikt om gegevens van een server op te halen. Laten we een voorbeeld bekijken met behulp van de fetch() API.

 1fetch('https://codesparklab.com/json/example.json')
 2    .then(response => {
 3        if (!response.ok) {
 4            throw new Error('Network error');
 5        }
 6        return response.json();
 7    })
 8    .then(data => {
 9        console.log(data);
10    })
11    .catch(error => {
12        console.error('Error:', error);
13    });

• In deze code, aangezien fetch() een Promise retourneert, wordt then() gebruikt om de gegevens te verwerken nadat er een antwoord van de server is ontvangen. Fouten worden afgehandeld met catch().

Meerdere Promises afhandelen

Promise.all()

Om meerdere Promises gelijktijdig uit te voeren en alleen verder te gaan als ze allemaal slagen, gebruik je Promise.all().

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

Promise.allSettled()

Als je meerdere Promises tegelijk wilt uitvoeren en alle resultaten wilt ontvangen, ongeacht succes of mislukking, gebruik dan Promise.allSettled().

 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 afgehandeld (ofwel vervuld ofwel geweigerd). Elk resultaat bevat een status-eigenschap ('fulfilled' of 'rejected'). Zelfs als sommige mislukken, heeft dat geen invloed op de andere operaties.

Promise.race()

Promise.race() geeft het resultaat terug van de Promise die als eerste wordt afgehandeld, ongeacht of deze is vervuld of afgewezen.

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 eerst voltooide Promise geretourneerd.

Relatie met async/await

Door de async/await syntax te gebruiken, kun je Promises intuïtiever schrijven. Een async functie retourneert altijd een Promise en await wacht tot de Promise is opgelost.

 1async function fetchData() {
 2    try {
 3        const response = await fetch('https://codesparklab.com/json/example.json');
 4        const data = await response.json();
 5        console.log(data);
 6    } catch (error) {
 7        console.error('Error :', error);
 8    }
 9}
10
11fetchData();

Door async/await op deze manier te gebruiken, kunnen asynchrone operaties worden geschreven als synchrone code, wat het leesbaarder maakt.

Samenvatting

• Promise is een object voor het afhandelen van succes of falen van asynchrone operaties.
• Verwerk succesvolle operaties met then() en fouten met catch().
• finally() definieert code die aan het einde wordt uitgevoerd, ongeacht succes of falen.
• Je kunt meerdere Promises samen afhandelen met behulp van Promise.all() of Promise.race().
• async/await is een syntax voor het eenvoudiger schrijven van Promises.

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

YouTube Video