Esecuzione asincrona in JavaScript

In molti linguaggi di programmazione, i processi asincroni vengono gestiti generando un nuovo thread che opera in background. Tuttavia, in JavaScript, abbiamo un concetto chiamato contesto di esecuzione e loop di eventi, che impedisce l'esecuzione del resto del codice. Quando il contesto di esecuzione scopre tali blocchi di codice in un programma, li rispetta al loop evento per l'esecuzione prima di restituirli allo stack di chiamate. Esistono tre tipi di base di metodi di codice asincrona nella programmazione JavaScript: callback, promesse e asincroni/Aspetta parole chiave.

Questo articolo discuterà Esecuzione asincrona in JavaScript. Inoltre, dimostreremo anche i metodi JavaScript per eseguire l'esecuzione asincrona, come Callbacks, Promesse, asincrone/attesa, Con l'aiuto di esempi. Quindi iniziamo!

Callbacks con esecuzione asincrona in javascript

I callback sono uno degli stili di codifica più comuni per esprimere e gestire l'esecuzione asincrona in JavaScript. È un tipo di funzione che deve essere chiamato dopo che un'altra funzione ha completato la sua esecuzione. La funzione di callback viene invocata con la risposta al completamento dell'operazione specificata. Supponiamo di voler assicurarti che un particolare pezzo di codice nel tuo programma JavaScript non esegui fino a quando l'altro non termina la sua esecuzione. In tal caso, è possibile ottenere questa funzionalità utilizzando la funzione di callback.

Esempio: callbacks con esecuzione asincrona in javascript

Lascia che ti faccia un esempio che ti aiuterà a quello che abbiamo dichiarato. Considera uno scenario in cui è necessario scrivere una stringa in un flusso di documenti dopo 7 Secondi. In questo caso, puoi usare il "setTimeout ()"Funzione integrata JavaScript che valuta un'espressione o chiama qualsiasi funzione dopo un determinato periodo di tempo. Nel nostro caso, abbiamo utilizzato la funzione "setTimeout ()" per invocare il definito "myFunction ()"Dopo 7 secondi:

Aspetta 7 secondi (7000 millisecondi)

Puoi eseguire l'esempio sopra offerto nel tuo editor di codice preferito o in qualsiasi sandbox di codifica online,; Tuttavia, utilizzeremo JSbin per lo scopo dimostrativo:

Dopo aver eseguito il programma JavaScript fornito, ti verrà chiesto di attendere "7 secondi":

Dopo 7 secondi, la stringa "Esecuzione asincrona in JavaScript"Verrà mostrato come output:

Promette con l'esecuzione asincrona in Javascript

Quando si incazza diverse chiamate di funzione insieme, uno dei problemi principali dei callback è che diventa difficile tracciare il flusso dell'esecuzione. IL ".Poi()"Sintassi in"Promesse"Ti salva in una situazione del genere permettendoti di catena le promesse insieme. Ti consente di collegare i gestori con il valore asincrono aggiunto del successo o la causa del fallimento. Di conseguenza, i metodi asincroni si comporteranno in modo simile a quelli sincroni.

Invece di fornire immediatamente il valore finale, la tecnica asincrona restituisce una promessa che offre il valore che può essere utilizzato nell'ulteriore elaborazione. Le tue promesse possono essere in uno dei tre stati: in sospeso, soddisfatto o respinto:

• In attesa di: Prima che si verifichi un'operazione, la promessa aggiuntiva è in pendente.
• Soddisfatto: Lo stato adeguato di una promessa significa che l'operazione aggiunta è stata completata.
• Respinto: Quando viene lanciato un valore di errore per l'operazione incompleta, la promessa arriva sotto lo stato rifiutato.

Esempio: promesse con esecuzione asincrona in JavaScript

Per mostrare il funzionamento delle promesse con l'esecuzione asincrona in JavaScript, in primo luogo, definiremo un “showMessage ()"Funzione che verrà invocata sia per il successo che per il fallimento della promessa aggiunta:

L'esecuzione del codice di cui sopra ti mostrerà il seguente output:

Ora, apposta, cambieremo il valore della variabile "UN"Per verificare se il callback per il fallimento della promessa funziona o no:

Come puoi vedere, il callback per il fallimento sta visualizzando "Errore riscontrato"String secondo la nostra codifica del programma JavaScript:

Async/Abveat con esecuzione asincrona in JavaScript

IL "asincrone" E "Aspetta"Le parole chiave vengono aggiunte alla versione più recente di JavaScript. Queste parole chiave semplificano la scrittura delle promesse e consentono all'utente di avere il controllo completo sulla sequenza di esecuzione delle promesse. La funzione asincrima restituisce sempre promesse e la funzione di attesa viene utilizzata nella funzione asincrona per fermare l'esecuzione del metodo aggiunto in attesa che la promessa si risolva. Successivamente, riprenderà l'esecuzione della funzione e emetterà il valore risolto.

Esempio: Async con esecuzione asincrona in JavaScript

Ora, nello stesso esempio, aggiungeremo un asincrima myFunction () che restituisce una promessa:

Dai un'occhiata al codice fornito e al suo output:

Esempio: attendere con l'esecuzione asincrona in JavaScript

In questo esempio, aggiungeremo prima "asincrone"Parola chiave con la definizione della funzione showMessage () per produrre una promessa. Dopo averlo fatto, specificheremo "Aspetta"Con il creato"mia promessa"Oggetto in modo che aspetti il ​​mypromise:

Ecco l'output che abbiamo ottenuto dall'esecuzione dell'esempio sopra dato:

Conclusione

Callbacks, Promises e Async/Aspetta le parole chiave sono i tre metodi per gestire l'esecuzione asincrona in JavaScript. I callback consentono l'accesso alle funzioni quando il metodo asincrono ha completato l'esecuzione; Promesse Assistere a concatenare il metodo insieme e la parola chiave asincrima/attesa fornisce un controllo aggiuntivo sulle promesse. Questo articolo ha discusso dell'esecuzione asincrona in JavaScript. Inoltre, abbiamo anche dimostrato i metodi di esecuzione asincrona come callback, promesse, asincronizzati/attesa in JavaScript con esempi.