In deze tutorial leert u met behulp van voorbeelden over JavaScript-beloften en beloftes.
In JavaScript is een belofte een goede manier om asynchrone bewerkingen af te handelen . Het wordt gebruikt om erachter te komen of de asynchrone bewerking met succes is voltooid of niet.
Een belofte kan een van de drie staten hebben.
- In afwachting
- Vervuld
- Afgekeurd
Een belofte begint in een hangende staat. Dat betekent dat het proces niet voltooid is. Als de bewerking is geslaagd, eindigt het proces in een vervulde toestand. En als er een fout optreedt, eindigt het proces in een afgewezen toestand.
Als u bijvoorbeeld gegevens van de server opvraagt met behulp van een belofte, is deze in behandeling. Wanneer de gegevens met succes zijn binnengekomen, bevinden deze zich in een vervulde staat. Als er een fout optreedt, wordt deze afgewezen.
Maak een belofte
Om een belofte-object te maken, gebruiken we de Promise()constructor.
let promise = new Promise(function(resolve, reject)( //do something ));
De Promise()constructor neemt een functie als argument. De functie accepteert ook twee functies resolve()en reject().
Als de belofte succesvol terugkeert, wordt de resolve()functie aangeroepen. En als er een fout optreedt, wordt de reject()functie aangeroepen.
Laten we aannemen dat het onderstaande programma een asynchroon programma is. Vervolgens kan het programma worden afgehandeld door middel van een belofte.
Voorbeeld 1: programma met een belofte
const count = true; let countValue = new Promise(function (resolve, reject) ( if (count) ( resolve("There is a count value."); ) else ( reject("There is no count value"); ) )); console.log(countValue);
Uitvoer
Promise (: "Er is een telwaarde.")
In het bovenstaande programma wordt een Promiseobject gemaakt dat twee functies heeft: resolve()en reject(). resolve()wordt gebruikt als het proces succesvol is en reject()wordt gebruikt als er een fout optreedt in de belofte.
De belofte wordt opgelost als de waarde van count waar is.
Werken met JavaScript-belofte
JavaScript Promise Chaining
Beloften zijn handig als u meerdere asynchrone taken achter elkaar moet uitvoeren. Daarvoor gebruiken we belofte chaining.
U kunt een bewerking uitvoeren nadat een belofte is opgelost met behulp van methoden then(), catch()en finally().
JavaScript then () methode
De then()methode wordt gebruikt met de callback wanneer de belofte met succes is nagekomen of opgelost.
De syntaxis van then()methode is:
promiseObject.then(onFulfilled, onRejected);
Voorbeeld 2: de belofte koppelen met then ()
// returns a promise let countValue = new Promise(function (resolve, reject) ( resolve('Promise resolved'); )); // executes when promise is resolved successfully countValue.then( function successValue(result) ( console.log(result); ), ) .then( function successValue1() ( console.log('You can call multiple functions this way.'); ), );
Uitvoer
Belofte opgelost Op deze manier kun je meerdere functies aanroepen.
In het bovenstaande programma wordt de then()methode gebruikt om de functies aan de belofte te koppelen. De then()methode wordt aangeroepen wanneer de belofte met succes is opgelost.
U kunt meerdere then()methoden combineren met de belofte.
JavaScript catch () - methode
De catch()methode wordt gebruikt met de callback wanneer de belofte wordt afgewezen of als er een fout optreedt. Bijvoorbeeld,
// returns a promise let countValue = new Promise(function (resolve, reject) ( reject('Promise rejected'); )); // executes when promise is resolved successfully countValue.then( function successValue(result) ( console.log(result); ), ) // executes if there is an error .catch( function errorValue(result) ( console.log(result); ) );
Uitvoer
Belofte afgewezen
In het bovenstaande programma wordt de belofte afgewezen. En de catch()methode wordt gebruikt met de belofte om de fout op te lossen.
Werken met JavaScript-belofte chaining
JavaScript-belofte versus terugbellen
Beloften zijn vergelijkbaar met callback-functies in die zin dat ze beide kunnen worden gebruikt om asynchrone taken af te handelen.
JavaScript-callback-functies kunnen ook worden gebruikt om synchrone taken uit te voeren.
Hun verschillen kunnen worden samengevat in de volgende punten:
JavaScript-belofte
- De syntaxis is gebruiksvriendelijk en gemakkelijk te lezen.
- Foutafhandeling is gemakkelijker te beheren.
- Voorbeeld:
api (). dan (functie (resultaat) (retourneer api2 ();)). dan (functie (resultaat2) (retourneer api3 ();)). dan (functie (resultaat3) (// werk)). catch ( function (error) (// behandel elke fout die vóór dit punt kan optreden));
JavaScript terugbellen
- De syntaxis is moeilijk te begrijpen.
- Het afhandelen van fouten is mogelijk moeilijk te beheren.
- Voorbeeld:
api (function (result) (api2 (function (result2) (api3 (function (result3) (// werk wel als (fout) (// doe iets) else (// doe iets)));));)) ;
JavaScript eindelijk () methode
You can also use the finally() method with promises. The finally() method gets executed when the promise is either resolved successfully or rejected. For example,
// returns a promise let countValue = new Promise(function (resolve, reject) ( // could be resolved or rejected resolve('Promise resolved'); )); // add other blocks of code countValue.finally( function greet() ( console.log('This code is executed.'); ) );
Output
This code is executed.
JavaScript Promise Methods
There are various methods available to the Promise object.
| Method | Description |
|---|---|
all(iterable) | Waits for all promises to be resolved or any one to be rejected |
allSettled(iterable) | Waits until all promises are either resolved or rejected |
any(iterable) | Returns the promise value as soon as any one of the promises is fulfilled |
race(iterable) | Wait until any of the promises is resolved or rejected |
reject(reason) | Returns a new Promise object that is rejected for the given reason |
resolve(value) | Returns a new Promise object that is resolved with the given value |
catch() | Appends the rejection handler callback |
then() | Appends the resolved handler callback |
finally() | Appends a handler to the promise |
To learn more about promises in detail, visit JavaScript Promises.
