Scopri come creare programmi asincroni con JavaScript

La programmazione asincrona è un punto fermo nello sviluppo del software. È difficile credere che questo concetto di programmazione esista solo dal ventunesimo secolo. Il linguaggio di programmazione F# è stato il primo tra i suoi colleghi a introdurre la programmazione asincrona, nel 2007.

Altri linguaggi come C#, Python, JavaScript e C++ hanno gradualmente aggiunto il supporto per la programmazione asincrona. La grande domanda è: quale valore aggiunge la programmazione asincrona alle tue applicazioni?

Questo articolo risponde a questa e ad altre domande, quindi scoprirai tutto su come utilizzare la programmazione asincrona.

Che cos'è la programmazione sincrona?

La programmazione sincrona si riferisce a un programma nella sua forma più elementare. Questo modello di programmazione elabora le righe di codice in un programma o in uno script in modo sequenziale. Inizia sempre dalla prima riga di codice in un programma. Quindi attende che ogni riga di codice abbia completato la sua esecuzione prima di passare alla successiva.

Il modello sincrono include anche codice condizionale, come Se e mentre dichiarazioni. Anche se verrà eseguito solo del codice in un'istruzione condizionale, il programma verrà comunque eseguito in sequenza.

Esempio di programma sincrono

const SyncCode = () => {
 console.log("Questa è la prima riga del programma")
 console.log("Questa è la seconda riga del programma")
 console.log("Questa è l'ultima riga del programma")
}
SyncCode();

L'esecuzione del programma JavaScript sopra produrrà il seguente output nella console:

Questa è la prima riga del programma
Questa è la seconda riga del programma
Questa è l'ultima riga del programma

L'output sopra è esattamente quello che dovresti aspettarti. Il programma parte dall'alto e attende fino al termine di una riga di codice prima di passare alla successiva.

Che cos'è la programmazione asincrona?

La programmazione asincrona è l'opposto della programmazione sincrona. Il modello di programmazione asincrono elabora più righe di codice contemporaneamente. Non attende che la riga di codice precedente in un programma abbia completato la sua esecuzione prima di passare a quella successiva.

Imparentato: Sincrono vs. Programmazione asincrona: in che cosa differiscono?

La programmazione asincrona può ridurre della metà i tempi di esecuzione, creando in modo efficace computer più veloci.

Esempio di programma asincrono

const AsyncCode = () => {
 console.log("Questa è la prima riga del programma")
 setTimeout(() => {
 console.log("Questa è la seconda riga del programma")
 }, 3000)
 console.log("Questa è l'ultima riga del programma")
}
AsyncCode();

L'esecuzione del codice JavaScript sopra produrrà il seguente output nella tua console:

Questa è la prima riga del programma
Questa è l'ultima riga del programma
Questa è la seconda riga del programma

Se confronti l'output della console sopra con il programma asincrono che lo genera, vedrai che c'è un'evidente discrepanza. La chiamata a tronco d'albero che dice "Questa è la seconda riga del programma" viene visualizzato prima di quello che dice "Questa è l'ultima riga del programma". Tuttavia, l'output della console non riflette questo.

Dato che JavaScript è principalmente sincrono, il codice nel programma sopra è stato eseguito in sequenza. Ma JavaScript supporta la programmazione asincrona tramite funzionalità come il setTimeout() metodo.

Il setTimeout() metodo è un metodo JavaScript asincrono che accetta due argomenti: una funzione e un ritardo. Il ritardo è un timer (in millisecondi), che ritarda l'esecuzione della funzione. Quindi, mentre il programma sopra attende i tre secondi per eseguire la funzione nel file setTimeout() metodo, si passa alla riga successiva nel codice. Ciò comporta l'esecuzione della terza chiamata di funzione prima della seconda.

Tecnologie JavaScript asincrone

A parte il setTimeout() metodo sopra menzionato, diverse tecnologie JavaScript utilizzano la programmazione asincrona. Queste tecnologie utilizzano il modello di programmazione asincrono per sviluppare applicazioni non bloccanti più veloci. Alcune di queste tecnologie includono:

• jQuery Ajax
• Asso
• NodeJS

Imparentato: Che cos'è Node.js? Ecco come utilizzare JavaScript lato server

Creazione di programmi asincroni con JavaScript

Esistono diversi modi per gestire il codice asincrono. Il metodo che scegli dovrebbe dipendere dal tipo di applicazione che desideri sviluppare. Questi metodi includono funzioni di callback, promesse e async/await.

Funzioni di richiamata

Esistono due proprietà importanti di una funzione di callback. Servono come parametri per altre funzioni e si basano su eventi esterni per svolgere il loro dovere. Il setTimeout() il metodo utilizzato nell'esempio asincrono sopra è una funzione di callback. Il programma gli passa una funzione di registro come parametro (la funzione di callback) e la esegue solo dopo tre secondi (l'evento).

Le funzioni di callback sono ottime per i piccoli programmi, ma man mano che le tue applicazioni crescono, possono diventare troppo complicate molto rapidamente. Questo perché le funzioni di callback chiamano spesso altre funzioni di callback, creando una catena di callback nidificate.

Usando le promesse

JavaScript ha aggiunto il supporto per le promesse dopo le funzioni di callback. Sono una buona alternativa quando si creano applicazioni più grandi. Una promessa rappresenta ciò che potrebbe accadere dopo un'operazione asincrona. Questo potenziale risultato assumerà una delle due forme seguenti: risolto o respinto. Una funzione separata gestisce ciascuno di questi risultati, eliminando la necessità di annidamento (il problema della funzione di callback). Invece, le promesse incoraggiano le funzioni della catena che sono più facili da usare.

Ogni promessa inizia con una nuova Promettere oggetto che ha una funzione anonima con il risolvere e rifiutare parametri. All'interno di questa funzione, avrai l'applicazione asincrona, che restituisce una risoluzione se l'operazione asincrona ha esito positivo o un rifiuto in caso contrario.

Il poi() la funzione catena gestisce il risolvere funzione, e il presa() la funzione catena gestisce il rifiutare funzione. Quindi, non sono necessarie istruzioni if ​​nidificate, come nel caso delle funzioni di callback.

Usando l'esempio delle promesse

const PromiseFunction = () =>{
 restituisce nuova promessa((risolvi, rifiuta) => {
 setTimeout(() => {
 risolvere ("questa operazione asincrona è stata eseguita correttamente")
 }, 3000)
 })
}
PromiseFunction().then((risultato) => {
 console.log("Successo", risultato)
}).catch((errore) => {
 console.log("Errore", errore)
})

Il codice sopra restituisce il seguente output nella console:

Riuscire questa operazione asincrona eseguita bene

Questo perché la promessa restituisce il risolvere funzione, che passa i suoi risultati alla poi() funzione. Se la promessa restituisce il rifiutare funzione utilizzata dal programma presa funzione invece.

Usando Async/Await

Se non vuoi creare una catena di promesse quando hai a che fare con operazioni asincrone, puoi provare async/await. Async/await non è uno strumento asincrono completamente diverso dalle promesse, solo un modo diverso di gestirle. Gestisce le promesse senza utilizzare il metodo della catena. Quindi, più o meno allo stesso modo in cui le promesse gestiscono le operazioni asincrone meglio delle funzioni di callback, async/await ha vantaggi rispetto alle semplici promesse.

Ci sono due attributi chiave di ogni funzione asincrona/attesa. Cominciano con il asincrono parola chiave e il aspettare la parola chiave attende il risultato di un'operazione asincrona.

Esempio di programma asincrono/in attesa

const PromiseFunction = () =>{
 restituisce nuova promessa((risolvi, rifiuta) => {
 setTimeout(() => {
 risolvere ("questa operazione asincrona è stata eseguita correttamente")
 }, 3000)
 })
}
const AsyncAwaitFunc = async () => {
 risultato const = await PromiseFunction();
 console.log (risultato);
}
AsyncAwaitFunc();

Il codice sopra restituirà il seguente output nella console:

questa operazione asincrona è stata eseguita bene

Quali sono i principali takeaway?

Ci sono diversi punti importanti che dovresti prendere da questo articolo:

• La programmazione asincrona è preziosa perché riduce il tempo di attesa di un programma, creando applicazioni più veloci.
• Una funzione di callback può essere sincrona o asincrona.
• Le promesse offrono un modo migliore per gestire le operazioni asincrone rispetto alle funzioni di callback.
• Le funzioni Async/await gestiscono le promesse in un modo migliore rispetto all'utilizzo delle funzioni a catena.
• Una funzione async/await gestisce le operazioni asincrone in un modo che sembra sincrone, rendendone più facile la comprensione.
• Le funzioni delle frecce ti aiutano a scrivere un codice migliore.

Le funzioni JavaScript Arrow possono renderti uno sviluppatore migliore

Vuoi essere migliore nello sviluppo web? Le funzioni freccia, aggiunte a JavaScript ES6, offrono due modi per creare funzioni per app Web.

Leggi Avanti

Circa l'autore