Javascript - ES8 Presentazione delle funzioni `async / await`

Per ottenere una prospettiva sul perché le persone sono così entusiaste delle funzioni asincrone / in attesa di ES8, è necessario conoscere l'evoluzione dei comportamenti e delle soluzioni asincrone in JS.

callback

O più precisamente, richiamata all'interno della richiamata all'interno della richiamata ...

callback inferno

I callback presentano diversi problemi. Possono essere difficili da seguire e anche da costruire. Sono rigidi nella loro forma. Sono brutti e ingombranti. Questo alla fine portò all'adozione mainstream del termine "callback hell".

I callback servono al loro scopo ma quando inizi a lavorare con applicazioni e schemi di navigazione più complessi con dati relazionali complessi, hai bisogno di una soluzione migliore. Inserisci PROMISES.

promesse

Ridare potere alle persone.

Una promessa è una soluzione più sofisticata ai problemi asincroni in JS. L'oggetto Promise rappresenta l'eventuale completamento (o errore) di un'operazione asincrona e il suo valore risultante. Una promessa è sempre in uno dei 3 stati:

  • in sospeso: stato iniziale, né soddisfatto né rifiutato.
  • completato: significa che l'operazione è stata completata con successo.
  • respinto: significa che l'operazione non è riuscita.

Una promessa in sospeso può essere adempiuta o respinta, a quel punto il gestore appropriato viene chiamato tramite .then () per i successi e .catch () per gli errori.

La cosa principale da tenere a mente: una promessa rappresenta il risultato finale di un'operazione asincrona.

Diamo un'occhiata ad alcuni codici:

esempi di promesse di base

Esempio di promessa nel mondo reale

Puoi vedere come le linee 34–36 sono molto più pulite dei nostri esempi di callback.

Un miglioramento ma ancora problemi qui. Puoi ancora finire in una promettente piramide di sventura, proprio come con i callback. Il looping delle promesse è sfumato e non intuitivo. Devi anche ricordare di usare cose come catch () e differite.

Immettere le funzioni Asincrono / Attendi.

ES8 funzioni asincrone / attendono

Ora diamo un'occhiata alla più recente iterazione di soluzioni asincrone in JS, la funzione asincrona / waitit.

La dichiarazione della funzione asincrona definisce una funzione asincrona, che restituisce un oggetto AsyncFunction.

Quando viene chiamata una funzione asincrona, restituisce una promessa. Quando la funzione asincrona restituisce un valore, la Promessa verrà risolta con il valore restituito. Quando la funzione asincrona genera un'eccezione o un valore, la Promessa verrà rifiutata con il valore generato.

Una funzione asincrona può contenere un'espressione wait, che mette in pausa l'esecuzione della funzione asincrona e attende la risoluzione della Promessa passata, quindi riprende l'esecuzione della funzione asincrona e restituisce il valore risolto.

Diamo un'occhiata ad alcuni codici:

In questo esempio vedrai PROMESSA STANDARD in azione seguita dallo stesso codice implementato con ASYNC / AWAIT

promessa standard vs asincrono / attendono

Invece di una catena di promesse (4–11) puoi scrivere lo stesso codice in una singola funzione (16–23).

Il motivo principale per cui potresti voler iniziare a implementare async / wait nel tuo codice è che ti consente di scrivere codice che appare ed esegue anche in modo asincrono senza bloccare il thread.

Questo è tutto per Async / Await Functions in ES6. Fammi sapere i tuoi pensieri e le tue domande e dammi un follow su Twitter. Continua dopo.

Se ti piace questo articolo, ti preghiamo di consigliarlo e condividerlo per aiutare gli altri a trovarlo!