Impara Introduzione a JavaScript Asincrono | JavaScript Asincrono e Integrazione API

Che cos'è la programmazione asincrona?

La programmazione asincrona consente al codice di eseguire operazioni non bloccanti. A differenza della programmazione sincrona—in cui ogni operazione attende il completamento della precedente prima di proseguire—la programmazione asincrona permette ad altri compiti di procedere senza attendere la conclusione di un'attività precedente.

Questo è fondamentale nello sviluppo web, dove può essere necessario eseguire operazioni che richiedono tempo, come il recupero di dati da un'API, l'attesa dell'input dell'utente o l'impostazione di timer.

Immagina di sviluppare un programma in cui 1 e 2 sono richieste al server, mentre 3, 4 e 5 rappresentano altre operazioni come la gestione delle interazioni dell'utente.

Nel modello sincrono, i compiti 1 e 2 bloccano l'esecuzione di 3, 4 e 5 fino al loro completamento. Ad esempio, se un utente pubblica un commento (1) e poi tenta di aprire una barra laterale (3), l'interfaccia si bloccherà fino a quando il commento non sarà stato elaborato, causando ritardi.

Nel modello asincrono, le richieste al server (1 e 2) non bloccano il programma. In attesa di una risposta, il programma prosegue con altri compiti (3, 4 e 5). Questo consente all'utente di interagire immediatamente con la barra laterale dopo aver pubblicato il commento, migliorando la reattività.

Differenze tra comportamento sincrono e asincrono

Programmazione sincrona

Nella programmazione sincrona, le attività vengono eseguite una dopo l'altra. Ogni attività deve essere completata prima che inizi la successiva. Se un'attività richiede molto tempo (ad esempio, il caricamento di un file di grandi dimensioni), blocca tutte le attività successive, rendendo l'applicazione non reattiva.


              123
            
console.log('Task 1: Start');
for (let i = 0; i < 1000000000; i += 1) {} // Simulate a long-running task
console.log('Task 2: After long task');

In questo esempio, l'Attività 2 verrà eseguita solo dopo che l'attività a lunga durata (il ciclo) sarà terminata. Questo blocca l'esecuzione del codice e può congelare il browser.

Programmazione asincrona

Nella programmazione asincrona, le attività possono essere avviate ed eseguite successivamente senza bloccare altro codice. Questo consente ad altre attività di continuare mentre si attendono il completamento di operazioni a lunga durata (ad esempio, il recupero di dati). Garantisce che attività come richieste di rete o timer non interrompano il flusso delle altre operazioni dell'applicazione.

index.html

index.css

index.js

In questo esempio, l'Attività 1 viene eseguita immediatamente, anche l'Attività 3 viene eseguita immediatamente, mentre l'Attività 2 viene eseguita dopo 2 secondi. Il comportamento asincrono consente al programma di proseguire senza attendere il completamento dell'Attività 2.

Esempi reali di operazioni asincrone

Recupero di dati da un'API

Una delle operazioni asincrone più comuni in JavaScript è il recupero di dati da un server remoto tramite API. JavaScript richiede dati da un'API, ma il resto del codice continua a essere eseguito invece di attendere la risposta del server. Una volta che i dati sono disponibili, vengono elaborati utilizzando una callback o una promise.

index.html

index.js

Codice Sincrono: Il paragrafo con id="syncMessage" dimostra che il codice sincrono viene eseguito immediatamente dopo l'avvio del fetch asincrono. Indica che il programma non si interrompe mentre attende i dati dall'API;
Fetch Asincrono: Una volta che i dati sono stati recuperati, il paragrafo con id="apiOutput" viene aggiornato, mostrando il completamento dell'operazione asincrona.

Timer (setTimeout e setInterval)

Le funzioni setTimeout() e setInterval() di JavaScript sono comunemente utilizzate per programmare l'esecuzione di attività dopo un certo ritardo o a intervalli regolari. Queste funzioni non bloccano l'esecuzione del resto del codice. Le attività che attivano vengono eseguite dopo un intervallo o ritardo specificato mentre il resto del codice continua a funzionare.

index.html

index.js

Codice Sincrono: Il paragrafo con id="syncMessage" si aggiorna immediatamente, mostrando che la parte sincrona del codice viene eseguita senza attendere il timer;
Timer Asincrono: Dopo 3 secondi, la callback di setTimeout() si completa e aggiorna il paragrafo con id="timerOutput" per mostrare che il timer è terminato.

Gestione degli Eventi di Input Utente

JavaScript attende in modo asincrono che si verifichino eventi senza bloccare altro codice quando gestisce le interazioni dell'utente (come clic, invio di moduli o pressione di tasti). I listener di eventi sono non bloccanti, il che significa che il resto del programma può continuare a essere eseguito mentre si attende l'input dell'utente.

index.html

index.js

Codice Sincrono: Il paragrafo con id="syncMessage" mostra che il codice sincrono viene eseguito immediatamente dopo l'impostazione del listener di eventi. Non attende che l'utente clicchi sul pulsante;
Gestione Asincrona degli Eventi: Il listener di eventi del pulsante viene attivato quando l'utente clicca, aggiornando il paragrafo con id="eventOutput".

Tutto è chiaro?

Grazie per i tuoi commenti!

Sezione 4. Capitolo 1

Chieda ad AI

Chieda pure quello che desidera o provi una delle domande suggerite per iniziare la nostra conversazione

Suggested prompts:

Can you explain the main benefits of asynchronous programming?

What are some common use cases for asynchronous programming in web development?

How does asynchronous programming improve user experience?

Awesome!

Completion rate improved to 2.22

Scorri per mostrare il menu

Che cos'è la programmazione asincrona?

Immagina di sviluppare un programma in cui 1 e 2 sono richieste al server, mentre 3, 4 e 5 rappresentano altre operazioni come la gestione delle interazioni dell'utente.

Differenze tra comportamento sincrono e asincrono

Programmazione sincrona


              123
            
console.log('Task 1: Start');
for (let i = 0; i < 1000000000; i += 1) {} // Simulate a long-running task
console.log('Task 2: After long task');

In questo esempio, l'Attività 2 verrà eseguita solo dopo che l'attività a lunga durata (il ciclo) sarà terminata. Questo blocca l'esecuzione del codice e può congelare il browser.

Programmazione asincrona

index.html

index.css

index.js

Esempi reali di operazioni asincrone

Recupero di dati da un'API

index.html

index.js

Codice Sincrono: Il paragrafo con id="syncMessage" dimostra che il codice sincrono viene eseguito immediatamente dopo l'avvio del fetch asincrono. Indica che il programma non si interrompe mentre attende i dati dall'API;
Fetch Asincrono: Una volta che i dati sono stati recuperati, il paragrafo con id="apiOutput" viene aggiornato, mostrando il completamento dell'operazione asincrona.

Timer (setTimeout e setInterval)

index.html

index.js

Codice Sincrono: Il paragrafo con id="syncMessage" si aggiorna immediatamente, mostrando che la parte sincrona del codice viene eseguita senza attendere il timer;
Timer Asincrono: Dopo 3 secondi, la callback di setTimeout() si completa e aggiorna il paragrafo con id="timerOutput" per mostrare che il timer è terminato.

Gestione degli Eventi di Input Utente

index.html

index.js

Codice Sincrono: Il paragrafo con id="syncMessage" mostra che il codice sincrono viene eseguito immediatamente dopo l'impostazione del listener di eventi. Non attende che l'utente clicchi sul pulsante;
Gestione Asincrona degli Eventi: Il listener di eventi del pulsante viene attivato quando l'utente clicca, aggiornando il paragrafo con id="eventOutput".

Tutto è chiaro?

Grazie per i tuoi commenti!

Sezione 4. Capitolo 1