Beloften (of Promises) zijn een manier om asynchrone programmeeracties te beheren. Deze kunnen bijzonder nuttig zijn in ReactJS waar je misschien fetching-data moet doen van een API of iets anders dat enige tijd duurt om te voltooien.
Een Promise is een object dat de afgeronde of gefaalde uitvoering van een asynchrone operatie vertegenwoordigt. Het is in één van de volgende staten:
1. Pending: de Promise’s uitkomst is nog niet bekend.
2. Fulfilled: de Promise is voltooid en heeft een resulterende waarde.
3. Rejected: de Promise heeft gefaald, meestal met een error.
Een eenvoudig voorbeeld van een Promise in actie is:
```
let myPromise = new Promise((resolve, reject) => {
let condition; // Some condition or logic
if (condition is met) {
resolve(“Promise is vervuld”);
} else {
reject(Error(“Promise is afgewezen”));
}
});
myPromise
.then(result => {
/* Doe iets met het resultaat */
})
.catch(error => {
/* Doe iets met de fout */
});
```
In januari genoemde voorbeeld, als de conditie wordt voldaan, wordt de Promise vervuld (de `resolve` functie wordt aangeroepen) en het bericht “Promise is vervuld” wordt doorgegeven. Wanneer je de Promise ‘aanroept’ met `.then()`, kun je toegang krijgen tot dat bericht. Als de conditie niet is voldaan, roept de Promise de `reject`-functie aan en gaat hij naar de `catch` methode waar je kan omgaan met de fout.
Een veelvoorkomend gebruiksscenario voor Promises in React is bij het ophalen van data. Hier is een voorbeeld van een component in React die data ophaalt van een API:
```
import React, { useEffect, useState } from ‘react’;
function MyComponent() { const [data, setData] = useState(null);
useEffect(() => { fetch(‘https://api.example.com/items’) .then(response => response.json()) .then(data => setData(data)) .catch(error => console.error(“Er is een fout opgetreden”, error)) }, []); // Lege array betekent dat deze effect alleen bij eerste render uitgevoerd wordt return (export default MyComponent;
```
In dit voorbeeld, we gebruik `fetch()` die een Promise retourneert. We gebruiken dan `then()` om te wachten op de belofte om zich te vervullen en zetten die data dan naar onze state met behulp van de `setData` functie. Als er een fout optreedt (de Promise is rejected), vangen we dat op met `catch()`.
