Concatenamento e composizione delle Promise
Imparare a concatenare più operazioni asincrone usando .then() e .pipe() e a comporre flussi di lavoro complessi attendendo il completamento di più Promise con $.when().
Concatenamento e composizione delle Promise è una lezione jQuery Academy gratuita su CoddyKit. Questa è la lezione 2 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.
Sequenziare le operazioni asincrone
Nello sviluppo web, spesso è necessario eseguire attività asincrone (come il recupero di dati) in un ordine specifico. La concatenazione delle promise consente di farlo in modo ordinato.
Anziché annidare i callback, creando il cosiddetto «callback hell», possiamo collegare le operazioni in sequenza, rendendo il codice molto più facile da leggere e mantenere.
Concatenazione con .then()
Il metodo .then() è fondamentale per la concatenazione. Quando un Deferred (o una Promise) viene risolto, viene eseguito il relativo callback .then(). Il valore restituito da questo callback può quindi essere utilizzato dal successivo .then() della catena.
Se il callback restituisce un nuovo Deferred, la catena attende che il nuovo Deferred venga risolto prima di proseguire.
Semplice esempio di catena .then()
Vediamo un semplice esempio in cui simuliamo due passaggi asincroni. Il secondo passaggio viene eseguito solo dopo il completamento del primo e utilizza i dati del primo passaggio.
Noti come il risultato di step1 ('Data from Step 1') venga passato a step2.
function runChainExample() {
let dfd1 = new $.Deferred();
let dfd2 = new $.Deferred();
setTimeout(() => {
console.log("Step 1 complete!");
dfd1.resolve("Data from Step 1");
}, 500);
dfd1.then(function(data1) {
console.log("Received in Step 2: " + data1);
setTimeout(() => {
console.log("Step 2 complete!");
dfd2.resolve("Processed " + data1);
}, 300);
return dfd2;
}).then(function(data2) {
console.log("Received in Final Step: " + data2);
console.log("Chain finished!");
});
}
$(document).ready(function() {
runChainExample();
});Flusso dei dati nelle catene .then()
Il valore restituito da un callback .then() determina l'input del .then() successivo.
- Se restituisce un valore non-Deferred, tale valore diventa il valore risolto per il
.then()successivo. - Se restituisce un oggetto Deferred, la catena si mette in pausa finché il Deferred non viene risolto; il valore risolto viene quindi passato al
.then()successivo.
Usare .pipe() per la trasformazione
Sebbene .then() sia lo standard moderno, il .Deferred() di jQuery offre anche .pipe(). È simile a .then(), ma originariamente è stato progettato per trasformare il valore risolto o rifiutato oppure per filtrare quale Deferred prosegue nella catena.
.pipe() può essere usato per restituire un nuovo Deferred che viene risolto con un valore trasformato, facendolo di fatto passare alla fase successiva.
Esempio di trasformazione con .pipe()
Qui usiamo .pipe() per prendere il risultato della prima operazione, trasformarlo (ad esempio, convertendolo in maiuscolo) e passare quindi il valore trasformato al gestore finale .done().
function runPipeExample() {
let dfd = new $.Deferred();
setTimeout(() => {
console.log("Initial data ready.");
dfd.resolve("hello world");
}, 500);
dfd.pipe(function(originalData) {
console.log("Piping: Transforming data...");
return originalData.toUpperCase(); // Transforms the value
}).done(function(transformedData) {
console.log("Final result: " + transformedData);
});
}
$(document).ready(function() {
runPipeExample();
});Comporre con $.when()
Che cosa succede se ha più attività asincrone indipendenti, ma deve attendere che siano state completate tutte prima di proseguire? È qui che entra in gioco $.when().
$.when() accetta come argomenti uno o più oggetti Deferred (o Promise) e restituisce un nuovo Deferred. Questo nuovo Deferred viene risolto solo quando tutti i Deferred di input sono stati risolti.
Esempio di attività parallele con $.when()
In questo esempio simuliamo due richieste AJAX indipendenti (fetchUser e fetchPosts). Usiamo $.when() per attendere il completamento di entrambe prima di registrare i risultati combinati.
Noti che vengono eseguite in parallelo, non in sequenza.
function runWhenExample() {
function fetchUser() {
let dfd = new $.Deferred();
setTimeout(() => {
console.log("User data fetched.");
dfd.resolve({ id: 1, name: "Alice" });
}, 800);
return dfd.promise();
}
function fetchPosts() {
let dfd = new $.Deferred();
setTimeout(() => {
console.log("Posts data fetched.");
dfd.resolve([{ id: 101, title: "Post 1" }, { id: 102, title: "Post 2" }]);
}, 500);
return dfd.promise();
}
$.when(fetchUser(), fetchPosts())
.done(function(userData, postsData) {
console.log("All data loaded!");
console.log("User: ", userData);
console.log("Posts: ", postsData);
})
.fail(function() {
console.log("One or more tasks failed.");
});
}
$(document).ready(function() {
runWhenExample();
});Accedere ai risultati di $.when()
Quando il Deferred restituito da $.when() viene risolto, i relativi callback .done() o .then() ricevono i valori risolti di ciascun Deferred di input come argomenti separati, nell'ordine in cui sono stati passati a $.when().
In questo modo è facile combinare ed elaborare i dati provenienti da più origini una volta che sono tutti disponibili.
Quiz sulla concatenazione delle Promise
Consideri il seguente frammento di codice jQuery:
let dfd1 = new $.Deferred();
let dfd2 = new $.Deferred();
dfd1.then(function(val) {
return val + " World";
}).then(function(newVal) {
console.log(newVal); // Line A
return dfd2;
}).then(function() {
console.log("Finished!"); // Line B
});
dfd1.resolve("Hello");
dfd2.resolve();Qual è l'output FINALE visualizzato nella console e in quale ordine?
Riepilogo: concatenazione e composizione
Abbiamo imparato a gestire flussi di lavoro asincroni complessi:
- Concatenazione con
.then(): mette in sequenza le operazioni, passando i risultati da una fase alla successiva. .pipe(): un metodo precedente per trasformare i valori o mappare i Deferred in una catena.- Composizione con
$.when(): attende il completamento in parallelo di più Deferred indipendenti prima di proseguire, fornendo i relativi risultati come argomenti separati.
Questi schemi sono fondamentali per creare applicazioni asincrone robuste e leggibili.
Impara JavaScript con un tutor IA — gratis
Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.
- Corsi
- 22
- Lezioni
- 48
Domande Frequenti
La lezione «Concatenamento e composizione delle Promise» è gratuita?
Sì — il testo completo di «Concatenamento e composizione delle Promise» è 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 «Concatenamento e composizione delle Promise»?
Imparare a concatenare più operazioni asincrone usando .then() e .pipe() e a comporre flussi di lavoro complessi attendendo il completamento di più Promise con $.when(). 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 2 di 3.
Quanto tempo richiede la lezione «Concatenamento e composizione delle Promise»?
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
- Comprendere gli oggetti Deferred
- Concatenamento e composizione delle Promise
- Gestione di più attività asincrone