In questo tutorial, imparerai a conoscere le promesse JavaScript e il concatenamento di promesse con l'aiuto di esempi.
In JavaScript, una promessa è un buon modo per gestire le operazioni asincrone . Viene utilizzato per scoprire se l'operazione asincrona è stata completata con successo o meno.
Una promessa può avere uno di tre stati.
- in attesa di
- Soddisfatto
- Respinto
Una promessa inizia in uno stato in sospeso. Ciò significa che il processo non è completo. Se l'operazione ha esito positivo, il processo termina in uno stato completato. E, se si verifica un errore, il processo termina in uno stato rifiutato.
Ad esempio, quando richiedi dati al server utilizzando una promessa, sarà in uno stato in sospeso. Quando i dati arrivano correttamente, saranno in uno stato soddisfatto. Se si verifica un errore, sarà in uno stato rifiutato.
Crea una promessa
Per creare un oggetto di promessa, usiamo il Promise()costruttore.
let promise = new Promise(function(resolve, reject)( //do something ));
Il Promise()costruttore accetta una funzione come argomento. La funzione accetta anche due funzioni resolve()e reject().
Se la promessa viene restituita correttamente, resolve()viene chiamata la funzione. E, se si verifica un errore, reject()viene chiamata la funzione.
Supponiamo che il programma seguente sia un programma asincrono. Quindi il programma può essere gestito utilizzando una promessa.
Esempio 1: programma con una promessa
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);
Produzione
Promise (: "C'è un valore di conteggio.")
Nel programma precedente, Promiseviene creato un oggetto che assume due funzioni: resolve()e reject(). resolve()viene utilizzato se il processo ha esito positivo e reject()viene utilizzato quando si verifica un errore nella promessa.
La promessa viene risolta se il valore di count è vero.
Promessa di lavoro di JavaScript
JavaScript Promise Chaining
Le promesse sono utili quando devi gestire più di un'attività asincrona, una dopo l'altra. Per questo, usiamo il concatenamento delle promesse.
È possibile eseguire un'operazione dopo la promessa viene risolto utilizzando metodi then(), catch()e finally().
Metodo JavaScript then ()
Il then()metodo viene utilizzato con la richiamata quando la promessa viene rispettata o risolta con successo.
La sintassi del then()metodo è:
promiseObject.then(onFulfilled, onRejected);
Esempio 2: concatenare la promessa con 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.'); ), );
Produzione
Promessa risolta È possibile chiamare più funzioni in questo modo.
Nel programma precedente, il then()metodo viene utilizzato per concatenare le funzioni alla promessa. Il then()metodo viene chiamato quando la promessa viene risolta correttamente.
Puoi concatenare più then()metodi con la promessa.
Metodo catch () di JavaScript
Il catch()metodo viene utilizzato con la richiamata quando la promessa viene rifiutata o se si verifica un errore. Per esempio,
// 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); ) );
Produzione
Promessa rifiutata
Nel programma di cui sopra, la promessa viene rifiutata. E il catch()metodo viene utilizzato con la promessa di gestire l'errore.
Il funzionamento del concatenamento di promesse JavaScript
Promessa JavaScript contro richiamata
Le promesse sono simili alle funzioni di callback nel senso che possono essere utilizzate entrambe per gestire attività asincrone.
Le funzioni di callback JavaScript possono essere utilizzate anche per eseguire attività sincrone.
Le loro differenze possono essere riassunte nei seguenti punti:
Promessa JavaScript
- La sintassi è intuitiva e di facile lettura.
- La gestione degli errori è più facile da gestire.
- Esempio:
api (). then (function (result) (return api2 ();)). then (function (result2) (return api3 ();)). then (function (result3) (// do work)). catch ( funzione (errore) (// gestisce qualsiasi errore che può verificarsi prima di questo punto));
Richiamata JavaScript
- La sintassi è difficile da capire.
- La gestione degli errori potrebbe essere difficile da gestire.
- Esempio:
api (function (result) (api2 (function (result2) (api3 (function (result3) (// do work if (error) (// do something) else (// do something)));));)) ;
Metodo JavaScript infine ()
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.
