Javascript Aspetta

Michael Zippo 04.11.2021

Introdotto in ES6, Promises ti consente di scrivere facilmente codice asincrono senza dover gestire più funzioni di callback. Con le promesse, non c`è bisogno di preoccuparsi di callback multi-livello che sono sia difficili da scrivere che da mantenere.

C`è un`altra caratteristica in JavaScript che rende ancora più semplice scrivere codice asincrono usando Promise: le funzioni asincrone / assistere. Questi: ti consentono di scrivere codice che esegue look sincroni ma crea routine asincrone.

In questa guida, discuteremo cos`è la funzione asincrona / wait e come puoi usarla nel tuo codice. Iniziamo

Promesse: un aggiornamento

Prima di iniziare a parlare di funzioni asincrone/di attesa, dobbiamo ricapitolare le promesse. Una promessa rappresenta un`operazione asincrona. Indica il codice che verrà eseguita un`operazione e, se l`operazione ha esito positivo, verrà restituito un valore. In caso contrario, verrà restituito un errore al resto del programma.

Una promessa rappresenta un valore che non è noto al momento della creazione della promessa. Una promessa è proprio questo: una promessa che i valori futuri saranno restituiti al tuo codice. Poiché la promessa è un oggetto, deve essere scritta in maiuscolo.

Considera questo scenario. Devi recuperare una risorsa da un`API. Ci vorranno uno o due secondi per elaborare la tua richiesta. Invece di avere l`utente in attesa che la richiesta venga elaborata, puoi spostare il tuo codice su una Promessa in modo che il resto del tuo programma possa continuare a funzionare.

Ciò significa che puoi continuare a eseguire il rendering di parte del tuo interfaccia utente del sito Web durante l`estrazione dei dati. Non appena viene restituito un valore, Promise lo invierà al tuo programma principale.

Ecco un esempio di promise:.

Il nostro feedback sul codice: i tuoi cookie sono stati inviati! esegui il metodo sendCookies.then(), la nostra promessa viene mantenuta. Il nostro programma attende 1000 millisecondi, quindi restituisce il valore "I tuoi cookie sono stati inviati!" " Il nostro programma principale

Come usare Async e Wait

In una funzione e async / wait, un`istruzione wait di esecuzione del codice si blocca all`interno della sua funzione asincrona fino a quando "a cui viene restituita una promessa. motivo per cui gli sviluppatori spesso affermano che funzioni di attesa asincrone/asincrone ma osservano l`esecuzione di attività asincrone.

Considera il seguente esempio:.

Il nostro feedback sul codice: i tuoi cookie sono stati inviati! La nostra funzione sendCookies() impiega 1000 millisecondi per restituire il valore "I tuoi cookie sono stati inviati". In questo caso, abbiamo dichiarato una funzione asincrona in modo che il nostro codice sia in attesa che una promessa venga risolta o rifiutata.

La funzione "asincrona" La parola chiave dice al nostro codice che vogliamo eseguire un`operazione asincrona operazione nella nostra funzione. La parola chiave "aspettativa" indica che il nostro codice attende il ritorno della promessa sendCookies() prima di continuare a eseguire il nostro programma.

Le funzioni asincrone restituiscono sempre una promessa.

Utilizzo di Async e With Multiple Pass Wait

Le funzioni asincrone/di attesa vengono utilizzate più spesso quando sono presenti più promesse con cui è necessario lavorare. Questo è talvolta chiamato concatenamento di promesse. In effetti, il tuo codice attenderà che una promessa ritorni a ogni passaggio prima di passare a quello successivo:

Il nostro codice restituisce:

Ogni passaggio richiede 1000 millisecondi interi!. La nostra funzione sendCookies() non viene eseguita fino alla promessa di restituzione dalla nostra funzione ProcessOrder().

Espressioni asincrone

Esistono tre modi per utilizzare una funzione asincrona/attesa.

Il primo è l`approccio che abbiamo mostrato nei nostri ultimi esempi: dichiarando le funzioni. Nei nostri esempi, abbiamo dichiarato funzioni che restituiscono una promessa, quindi abbiamo usato le parole "async" e "expectation" - key per eseguire queste funzioni

Puoi anche dichiarare una funzione asincrona usando le funzioni di direzione:

Questo codice restituisce: I tuoi cookie sono stati inviati! questo è lo stesso del nostro primo esempio, ma invece di dichiarare una funzione main() abbiamo usato una funzione freccia

Allo stesso modo tu può utilizzare la sintassi dell`espressione della funzione:.

Questo codice di ritorno: I tuoi cookie sono stati inviati Come puoi vedere, l`output è di nuovo lo stesso. L`unica differenza è come abbiamo dichiarato la nostra funzione.

In effetti, questa sintassi è molto simile al nostro ultimo esempio. Usiamo semplicemente la parola chiave "funzione ()" invece di usare una funzione boom.

Non c`è modo migliore per dichiarare una funzione asincrona / wait. Tutto dipende dal programma che stai scrivendo e dalla sintassi che preferisci. Sebbene si possa sostenere che le funzioni di indirizzamento siano il metodo più conciso, altri modi per dichiarare una funzione asincrona/di attesa potrebbero essere migliori in altri casi.

Elaborazione delle richieste Web utilizzando Async/Attesa

Uno degli usi più comuni della funzione async / è await per elaborare le richieste Web con un`API basata su promesse, Fetch As(). Puoi leggere di più su come utilizzare fetch() nella nostra guida JavaScript per principianti per la ricerca

Quando eseguiamo la nostra funzione retrieveComments(), utilizziamo la funzione chiave di parola" wait " to wait" per l`esecuzione del nostro fetch () istruzione. Ciò significa che il resto della nostra pianificazione non continua fino a quando la nostra richiesta Web non è stata elaborata. In effetti, la funzione restituisce una promessa.

Quando una promessa viene restituita dalla funzione fetch() fetch (), convertiamo il valore restituito in JSON, quindi identifichiamo l`oggetto per recuperare un elenco di nomi di tutti i commenti e stamparlo sulla console

Come gestire un errore

Oh, come vorrei che gli errori non si verificassero nel codice. Ma lo fanno, e lì sviluppatori dobbiamo pianificare qualcosa. Funzione asincrona, la gestione degli errori viene eseguita utilizzando un tentativo sincrono ... catch. Considera questo codice:.

Nel nostro esempio, abbiamo usato un .catch() se ne è tornato uno. In questo caso, utilizziamo require ("Errore") per indicare al nostro codice che si è verificato un errore.

Se questa istruzione viene eseguita, la nostra dichiarazione .catch() si attiva e l`errore viene stampato.

Il nostro codice restituisce: NetworkError durante il tentativo di recuperare la risorsa. In questo esempio, abbiamo utilizzato un`istruzione try/catch per verificare se il nostro metodo wait ha restituito una promessa di successo. Ancora una volta, la nostra API non è valida e il nostro programma rifiuta la nostra promessa. Quando ciò accade, il "catch" viene eseguito nel nostro blocco try/catch, che registra il nostro errore sulla console.

Conclusione

Le funzioni asincrone / wait aiutano a scrivere operazioni asincrone nel codice. Quando viene dichiarata una funzione asincrona, puoi utilizzare la parola chiave "in attesa" per attendere l`esito delle operazioni. La parola chiave wait deve essere utilizzata con una funzione che restituisce una promessa.