Comprendi le funzioni asincroni/attesa in javascript | Spiegato con esempi

La parola chiave asincrica viene utilizzata per convertire una funzione in un funzione asincrona Mentre Aspetta La parola chiave è utilizzabile solo all'interno di un asincrone funzione. L'asincronizzazione e l'attesa sono utilizzati per l'esecuzione asincrona del programma e implementano una funzionalità guidata dalla promessa sul codice.

Asincrone parola chiave se utilizzata dalla definizione di una funzione rende la funzione restituire a Promettere, Mentre Aspetta La funzione fa aspettare la funzione asincrima che venga restituita al suo interno. Per comprendere l'uso dell'asincronizzazione e attendere le funzioni devi avere una comprensione acuta di come le promesse funzionano in JavaScript.

Async e Asvet sono un concetto JavaScript di livello avanzato, ecco perché lo impareremo attraverso vari esempi e lo capiremo passando attraverso la linea di esempio per riga.

Esecuzione sequenziale in javascript

JavaScript è un linguaggio sequenzialmente o possiamo dire un linguaggio di scripting a thread singolo. Il codice è invocato riga per linea in modo procedurale.

Considera le righe del codice digitato di seguito:

funzione hello ()
console.log ("Hello World");
linuxhint ();

funzione linuxhint ()
console.log ("Tutorial di LinuxHint");

console.log ("Il codice viene eseguito nella sequenza che è invocato");
Ciao();

Osserva l'output sulla console come:

Come puoi vedere, le funzioni o le linee invocate prima sono state sempre finite prima. Il motivo per mostrarti un semplice esempio come questo era farti notare quando la sequenza di esecuzione cambierà con Async attesa e promette.

Asincrone/ attesa in azione

Considera una funzione semplice che restituisce un po 'di testo, come:

funzione getUSers ()
console.log ("all'interno della funzione getusers");
restituire "utenti";

console.log ("inizio del codice");
var list = getUSers ();
console.registro (elenco);
console.log ("fine del codice");

L'output del seguente codice è:

Come possiamo vedere la funzione restituita come la stringa che dice, utenti. Proviamo a mettere la parola chiave asincrone prima della definizione della funzione come:

funzione asincrica getUSers ()
console.log ("all'interno della funzione getusers");
restituire "utenti";

Ora, sulla tua console vedrai che questa volta la funzione ha restituito una promessa che aveva lo stato "adempiuto":

Ma nei casi in cui si sta recuperando alcuni dati da una API REST o da qualsiasi API Web, questa promessa cambierà più stati, da pendenti a soddisfatti/rifiutati. In tali casi, aspettiamo il ritorno del risultato della promessa usando il Aspetta parola chiave.

Per questo, useremo l'API Fetch e recuperare le informazioni sugli utenti dall'API.github/utenti "con le seguenti righe di codice:

funzione asincrica getUSers ()
console.log ("all'interno della funzione getusers");
const response = wait fetch ("https: // API.github.com/utenti ");
console.log ("API ha risposto, utenti ricevuti");
const utenti = aspetta la risposta.json ();
console.log ("JSON convertito");
restituire gli utenti;

Ci sono molte cose da spiegare qui:

• Quando una nuova variabile viene inizializzata con questa funzione, la prima riga verrà eseguita e il testo verrà stampato sulla console.
• Quando il codice raggiunge la parola chiave Aspetta Controllerà se la promessa è adempiuta o in sospeso, se è nello stato in sospeso, uscirà da questa funzione ed eseguirà altre parti del codice.
• Dopo aver eseguito altre parti del codice, tornerà all'interno della funzione alla prima parola chiave in attesa e ricontrollerà lo stato della promessa.
• Dopo aver ricevuto uno stato soddisfatto/rifiuto, eseguirà la riga successiva che è console.tronco d'albero().
• Nella riga successiva, risposta.JSON è anche una promessa, verificherà il suo stato e, in attesa dello stato, uscirà dalla funzione ed eseguirà le altre parti del codice.
• Dopo aver eseguito tutto l'altro codice, il puntatore tornerà nella funzione, controlla lo stato di risposta.JSON, e sullo stato soddisfatto/respinto, eseguirà la riga successiva.

In questo modo, l'intero programma uscirà dalla normale esecuzione sequenziale e implementerà un'esecuzione asincrona del codice utilizzando promesse e asincrone/attesa Parole chiave.

Lo snippet completo del codice è come:

funzione asincrica getUSers ()
console.log ("all'interno della funzione getusers");
const response = wait fetch ("https: // API.github.com/utenti ");
console.log ("API ha risposto, utenti ricevuti");
const utenti = aspetta la risposta.json ();
console.log ("JSON convertito");
restituire gli utenti;

console.log ("Codice inizia");
var list = getUSers ();
console.log ("elenco variabili creato");
console.registro (elenco);
elenco.Quindi ((utente) => console.log (utente));
console.log ("ultima riga del codice");

Nota: La linea "elenco.Quindi ((utente) => console.log (utente));"Non verrà eseguito fino alla funzione getusers si occupa di tutte le promesse e restituisce il valore, anche qui l'esecuzione sequenziale cambierà.

Ora, se esegui questo programma come script di un file HTML, vedrai il seguente output sulla tua console:

Esamina attentamente l'output e noterai il flusso di esecuzione come:

• Il codice avvia e la variabile viene dichiarata sulla funzione.
• Il puntatore va all'interno della funzione, stampa la prima riga, vede il Aspetta parola chiave, lascia la funzione e restituisce una promessa in sospeso alla variabile "elenco"Che abbiamo appena creato.
• Esegui altre parti del codice (ecco perché puoi vedere "Ultima riga del codice") In attesa della promessa in Aspetta.
• Vede la linea elenco.Poi() ma non verrà eseguito fino alla funzione getusers Restituisce una promessa con uno stato risolto/rifiutato.
• Torna all'interno della funzione, risponde API, crea un elenco di utenti e lo converte in JSON.
• Lo stato delle promesse restituite dalla funzione asincrimale getusers modifiche al soddisfacimento e al elenco.Poi() riga eseguita e otteniamo i dati JSON stampati sulla console.

È così che si altera l'esecuzione sequenziale e implement l'esecuzione asincrona

Conclusione

Asincrone E Aspetta Le parole chiave vengono utilizzate per implementare l'esecuzione asincrona del codice JavaScript con l'aiuto delle promesse. Asincrone parola chiave se utilizzata prima della dichiarazione di una funzione converte quella funzione in un funzione asincrona e il suo tipo di ritorno cambia in una promessa. Mentre Aspetta è una parola chiave che attende che una promessa venga ricevuta all'interno di un funzione asincrona. Asincrone/attesa Aiutaci a scrivere promesse in un modo molto più bello e ordinato che è più leggibile e comprensibile.