0Pricing
jQuery Academy · Lezione

Gestione di più attività asincrone

Padroneggiare il coordinamento di diverse attività asincrone indipendenti o dipendenti, garantendo il corretto ordine di esecuzione e la gestione degli errori in tutte le operazioni.

Gestione di più attività asincrone è una lezione jQuery Academy gratuita su CoddyKit. Questa è la lezione 3 di 3. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento jQuery Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso jQuery Academy include 3 lezioni in totale.

Perché coordinare le attività asincrone?

Nello sviluppo web, molte operazioni sono asincrone. Ciò significa che non avvengono istantaneamente né in una sequenza rigida. Si pensi al recupero di dati da un server, al caricamento di immagini o all'esecuzione di animazioni.

Quando l'applicazione deve eseguire più attività di questo tipo contemporaneamente o in un ordine specifico, è necessario un modo per coordinarle efficacemente. Questa lezione mostra come fare!

La sfida delle attività multiple

Immagini di dover caricare il profilo di un utente e le sue notifiche più recenti. Si tratta di due richieste separate al server.

  • Come si può sapere quando sono state completate entrambe?
  • Che cosa succede se una fallisce?
  • Che cosa succede se una dipende dall'altra (ad esempio, per ottenere le notifiche relative a uno specifico ID utente presente nel profilo)?

Senza un coordinamento adeguato, l'interfaccia utente potrebbe mostrare dati incompleti o smettere completamente di funzionare.

Introduzione a `$.when()` per l'esecuzione in parallelo

$.when() di jQuery è uno strumento potente per coordinare più operazioni asincrone indipendenti. Accetta come argomenti uno o più oggetti Deferred/Promise.

$.when() restituisce una Promise principale che viene risolta quando sono state risolte tutte le singole Promise passate. Se una qualsiasi di esse viene rifiutata, la Promise principale viene rifiutata immediatamente.

Esempio di `$.when()`: recupero in parallelo

Simuliamo il recupero in parallelo di due diversi set di dati. Useremo $.Deferred() per imitare delle richieste AJAX a scopo dimostrativo.

Provi a eseguire questo codice:

// Assume jQuery is loaded in the environment
$(function() {
  function fetchData(name, delay) {
    let dfd = $.Deferred();
    setTimeout(function() {
      console.log(`Finished fetching ${name}`);
      dfd.resolve(`Data for ${name}`);
    }, delay);
    return dfd.promise();
  }

  let profilePromise = fetchData("User Profile", 1500);
  let settingsPromise = fetchData("App Settings", 800);

  console.log("Starting parallel fetches...");

  $.when(profilePromise, settingsPromise)
    .done(function(profileData, settingsData) {
      console.log("All data loaded successfully!");
      console.log(`Profile: ${profileData}`);
      console.log(`Settings: ${settingsData}`);
    });
});

Gestire i risultati di `$.when()`

Quando la Promise di $.when() viene risolta, il relativo callback .done() riceve i valori risolti di ciascuna Promise originale come argomenti separati.

  • Se passa N Promise a $.when(), il callback .done() riceverà N argomenti.
  • Gli argomenti sono nello stesso ordine delle Promise passate a $.when().

In questo modo è facile lavorare con tutti i risultati una volta che sono pronti.

Gestione degli errori di `$.when()`

Che cosa succede se una delle operazioni parallele fallisce? La Promise principale di $.when() viene rifiutata immediatamente se una qualsiasi delle singole Promise viene rifiutata.

Viene quindi attivato il callback .fail(), che riceve il motivo del rifiuto della prima Promise che ha avuto esito negativo. Le restanti operazioni parallele continueranno a essere eseguite, ma $.when() avrà già segnalato l'errore.

Esempio: `$.when()` con errore

Modifichiamo l'esempio precedente in modo che una delle operazioni di recupero fallisca. Osservi l'output:

// Assume jQuery is loaded in the environment
$(function() {
  function fetchData(name, delay, shouldSucceed = true) {
    let dfd = $.Deferred();
    setTimeout(function() {
      if (shouldSucceed) {
        console.log(`Finished fetching ${name}`);
        dfd.resolve(`Data for ${name}`);
      } else {
        console.log(`Failed to fetch ${name}`);
        dfd.reject(`Error: ${name} could not be loaded`);
      }
    }, delay);
    return dfd.promise();
  }

  let profilePromise = fetchData("User Profile", 1500, true);
  let settingsPromise = fetchData("App Settings", 800, false); // This one will fail

  console.log("Starting parallel fetches (one will fail)...");

  $.when(profilePromise, settingsPromise)
    .done(function(profileData, settingsData) {
      console.log("All data loaded successfully! (This won't run)");
    })
    .fail(function(errorReason) {
      console.log("One or more operations failed!");
      console.log(`Reason: ${errorReason}`);
    });
});

Coordinare le attività dipendenti

A volte le attività non sono indipendenti. Potrebbe essere necessario:

  • Recuperare un ID utente.
  • Usare quindi quell'ID per recuperare i dati dell'utente.
  • Usare infine quei dati per recuperare i post specifici dell'utente.

È necessaria una catena sequenziale di operazioni asincrone, in cui ogni passaggio dipende dall'esito positivo e dal risultato del precedente. È possibile ottenere questo risultato concatenando .then() o .pipe().

Esempio: concatenazione di chiamate AJAX dipendenti

Ecco come concatenare due chiamate AJAX simulate, in cui la seconda dipende dal risultato della prima. Noti come il valore restituito dal primo .then() diventi l'input del successivo.

// Assume jQuery is loaded in the environment
$(function() {
  function fetchUserId() {
    let dfd = $.Deferred();
    setTimeout(() => {
      console.log("User ID fetched: 123");
      dfd.resolve(123);
    }, 500);
    return dfd.promise();
  }

  function fetchUserDetails(userId) {
    let dfd = $.Deferred();
    setTimeout(() => {
      if (userId === 123) {
        console.log(`Details fetched for user ${userId}`);
        dfd.resolve(`Details for User ${userId}`);
      } else {
        dfd.reject("Invalid User ID");
      }
    }, 700);
    return dfd.promise();
  }

  console.log("Starting dependent fetch chain...");

  fetchUserId()
    .then(function(id) {
      return fetchUserDetails(id); // Return a new promise
    })
    .done(function(details) {
      console.log("Full chain successful!");
      console.log(`Final Result: ${details}`);
    })
    .fail(function(error) {
      console.log("Chain failed:", error);
    });
});

Verifichi le Sue conoscenze

Consideri lo scenario in cui desidera caricare il profilo di un utente e il suo elenco di amici. La richiesta dell'elenco di amici necessita dell'ID utente, che fa parte dei dati del profilo.

Quale approccio jQuery è più adatto per questo coordinamento specifico?

Riepilogo: padroneggiare il coordinamento asincrono

Ha imparato a gestire efficacemente più attività asincrone!

  • $.when(): ideale per eseguire in parallelo attività indipendenti e attendere che siano state completate tutte o che una qualsiasi fallisca.
  • Concatenazione con .then(): perfetta per attività dipendenti, in cui l'output di un'operazione è necessario per quella successiva.
  • Gestione degli errori: sia $.when() sia le Promise concatenate forniscono .fail() per intercettare i rifiuti in qualsiasi punto, rendendo le applicazioni più robuste.

Questi schemi sono fondamentali per creare applicazioni web dinamiche e reattive con jQuery.

Domande Frequenti

La lezione «Gestione di più attività asincrone» è gratuita?

Sì — il testo completo di «Gestione di più attività asincrone» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso jQuery Academy, passa a CoddyKit PRO. Il corso jQuery Academy include 3 lezioni in totale.

Cosa imparerò in «Gestione di più attività asincrone»?

Padroneggiare il coordinamento di diverse attività asincrone indipendenti o dipendenti, garantendo il corretto ordine di esecuzione e la gestione degli errori in tutte le operazioni. Eserciti jQuery Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare jQuery Academy?

Non è richiesta alcuna esperienza precedente. jQuery Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 3.

Quanto tempo richiede la lezione «Gestione di più attività asincrone»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione jQuery Academy?

Sì. Ogni lezione jQuery Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

  1. Comprendere gli oggetti Deferred
  2. Concatenamento e composizione delle Promise
  3. Gestione di più attività asincrone
← Torna a jQuery Academy