In questo tutorial imparerai a conoscere le parole chiave asincrone / in attesa di JavaScript con l'aiuto di esempi.
Utilizzare la async
parola chiave con una funzione per rappresentare che la funzione è una funzione asincrona. La funzione async restituisce una promessa.
La sintassi della async
funzione è:
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 async
parola 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 await
parola chiave viene utilizzata all'interno della async
funzione per attendere l'operazione asincrona.
La sintassi da usare await è:
let result = await promise;
L'utilizzo di await
sospende 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, Promise
viene creato un oggetto e viene risolto dopo 4000 millisecondi. Qui, la asyncFunc()
funzione viene scritta utilizzando la async
funzione.
La await
parola 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 await
non viene utilizzato, ciao viene visualizzato prima che Promise venga risolto.
Nota : è possibile utilizzare await
solo 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, await
attende che ogni promessa sia completa.
Gestione degli errori
Durante l'utilizzo della async
funzione, 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/catch
block. 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/catch
blocco per gestire gli errori. Se il programma viene eseguito correttamente, andrà al try
blocco. E se il programma genera un errore, andrà al catch
blocco.
Per saperne di più try/catch
in 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/await
sono 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.