In questo tutorial imparerai a conoscere le parole chiave asincrone / in attesa di JavaScript con l'aiuto di esempi.
Utilizzare la asyncparola chiave con una funzione per rappresentare che la funzione è una funzione asincrona. La funzione async restituisce una promessa.
La sintassi della asyncfunzione è:
async function name(parameter1, parameter2,… paramaterN) ( // statements )
Qui,
- nome : nome della funzione
- parametri - parametri che vengono passati alla funzione
Esempio: funzione asincrona
// async function example async function f() ( console.log('Async function.'); return Promise.resolve(1); ) f();
Produzione
Funzione asincrona.
Nel programma precedente, la asyncparola chiave viene utilizzata prima della funzione per rappresentare che la funzione è asincrona.
Poiché questa funzione restituisce una promessa, puoi utilizzare il metodo di concatenamento in then()questo modo:
async function f() ( console.log('Async function.'); return Promise.resolve(1); ) f().then(function(result) ( console.log(result) ));
Produzione
Funzione asincrona 1
Nel programma precedente, la f()funzione viene risolta e il then()metodo viene eseguito.
JavaScript attende la parola chiave
La awaitparola chiave viene utilizzata all'interno della asyncfunzione per attendere l'operazione asincrona.
La sintassi da usare await è:
let result = await promise;
L'utilizzo di awaitsospende la funzione asincrona finché la promessa non restituisce un valore di risultato (risoluzione o rifiuto). Per esempio,
// a promise let promise = new Promise(function (resolve, reject) ( setTimeout(function () ( resolve('Promise resolved')), 4000); )); // async function async function asyncFunc() ( // wait until the promise resolves let result = await promise; console.log(result); console.log('hello'); ) // calling the async function asyncFunc();
Produzione
Promessa risolta ciao
Nel programma precedente, Promiseviene creato un oggetto e viene risolto dopo 4000 millisecondi. Qui, la asyncFunc()funzione viene scritta utilizzando la asyncfunzione.
La awaitparola chiave attende che la promessa sia completa (risolvere o rifiutare).
let result = await promise;
Quindi, ciao viene visualizzato solo dopo che il valore della promessa è disponibile per la variabile risultato.
Nel programma sopra, se awaitnon viene utilizzato, ciao viene visualizzato prima che Promise venga risolto.
Funziona con la funzione async / await
Nota : è possibile utilizzare awaitsolo all'interno delle funzioni asincrone.
La funzione asincrona consente di eseguire il metodo asincrono in modo apparentemente sincrono. Sebbene l'operazione sia asincrona, sembra che l'operazione venga eseguita in modo sincrono.
Questo può essere utile se ci sono più promesse nel programma. Per esempio,
let promise1; let promise2; let promise3; async function asyncFunc() ( let result1 = await promise1; let result2 = await promise2; let result3 = await promise3; console.log(result1); console.log(result1); console.log(result1); )
Nel programma sopra, awaitattende che ogni promessa sia completa.
Gestione degli errori
Durante l'utilizzo della asyncfunzione, scrivi il codice in modo sincrono. E puoi anche utilizzare il catch()metodo per rilevare l'errore. Per esempio,
asyncFunc().catch( // catch error and do something )
L'altro modo in cui puoi gestire un errore è usare try/catchblock. Per esempio,
// a promise let promise = new Promise(function (resolve, reject) ( setTimeout(function () ( resolve('Promise resolved')), 4000); )); // async function async function asyncFunc() ( try ( // wait until the promise resolves let result = await promise; console.log(result); ) catch(error) ( console.log(error); ) ) // calling the async function asyncFunc(); // Promise resolved
Nel programma sopra, abbiamo usato il try/catchblocco per gestire gli errori. Se il programma viene eseguito correttamente, andrà al tryblocco. E se il programma genera un errore, andrà al catchblocco.
Per saperne di più try/catchin dettaglio, visita JavaScript JavaScript try / catch.
Vantaggi dell'utilizzo della funzione asincrona
- Il codice è più leggibile rispetto all'utilizzo di una richiamata o di una promessa.
- La gestione degli errori è più semplice.
- Il debug è più semplice.
Nota : queste due parole chiave async/awaitsono state introdotte nella versione più recente di JavaScript (ES8). Alcuni browser meno recenti potrebbero non supportare l'uso di async / await. Per saperne di più, visita JavaScript async / attendi il supporto del browser.
