Kedja och kombinera Promises
Lär er att kedja flera asynkrona operationer med .then() och .pipe(), och kombinera komplexa arbetsflöden genom att vänta på att flera Promises ska slutföras med $.when().
Kedja och kombinera Promises är en gratis lektion i jQuery Academy på CoddyKit. Detta är lektion 2 av 3. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för jQuery Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i jQuery Academy innehåller totalt 3 lektioner.
Sekvensera asynkrona operationer
Inom webbutveckling behöver vi ofta utföra asynkrona uppgifter (som att hämta data) i en viss ordning. Att kedja promises gör att vi kan göra detta på ett tydligt sätt.
I stället för att kapsla in callbacks, vilket kan leda till ”callback hell”, kan vi länka samman operationerna sekventiellt. Då blir koden mycket enklare att läsa och underhålla.
Kedjning med .then()
Metoden .then() är grundläggande för kedjning. När ett Deferred-objekt (eller en Promise) resolved körs dess callback för .then(). Det som callbacken returnerar kan sedan användas av nästa .then() i kedjan.
Om callbacken returnerar ett nytt Deferred-objekt väntar kedjan på att det nya Deferred-objektet ska resolved innan den fortsätter.
Enkelt exempel på en .then()-kedja
Vi tittar på ett enkelt exempel där vi simulerar två asynkrona steg. Det andra steget körs först när det första är klart och använder data från det första steget.
Observera hur resultatet från step1 ('Data from Step 1') skickas vidare till 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();
});Dataflöde i .then()-kedjor
Värdet som returneras av en callback för .then() avgör indata till nästa .then().
- Om du returnerar ett värde som inte är ett Deferred-objekt blir det värdet det resolved-värde som skickas till nästa
.then(). - Om du returnerar ett Deferred-objekt pausar kedjan tills Deferred-objektet resolved, och dess resolved-värde skickas sedan till nästa
.then().
Använda .pipe() för transformering
Även om .then() är den moderna standarden erbjuder jQuerys .Deferred() även .pipe(). Den liknar .then(), men utformades ursprungligen för att transformera det resolved- eller rejected-värde som returneras, eller för att filtrera vilket Deferred-objekt som fortsätter kedjan.
.pipe() kan användas för att returnera ett nytt Deferred-objekt som resolved med ett transformerat värde, vilket i praktiken ”skickar vidare” värdet till nästa steg.
.pipe()-exempel på transformering
Här använder vi .pipe() för att ta resultatet från den första operationen, transformera det (till exempel konvertera det till versaler) och sedan skicka det transformerade värdet till den avslutande hanteraren för .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();
});Kombinera med $.when()
Vad gör du om du har flera asynkrona uppgifter som är oberoende av varandra, men du måste vänta på att alla ska slutföras innan du fortsätter? Det är då $.when() kommer in i bilden.
$.when() tar ett eller flera Deferred-objekt (eller Promises) som argument och returnerar ett nytt Deferred-objekt. Det nya Deferred-objektet resolved först när alla indata-Deferred-objekt har resolved.
Exempel på parallella uppgifter med $.when()
I det här exemplet simulerar vi två oberoende AJAX-förfrågningar (fetchUser och fetchPosts). Vi använder $.when() för att vänta på att båda ska slutföras innan vi loggar de kombinerade resultaten.
Observera att de körs parallellt, inte sekventiellt.
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();
});Åtkomst till resultat från $.when()
När Deferred-objektet som returneras av $.when() resolved får dess callbacks för .done() eller .then() de resolved-värdena från vart och ett av indata-Deferred-objekten som separata argument, i den ordning de skickades till $.when().
Det gör det enkelt att kombinera och bearbeta data från flera källor när allt finns tillgängligt.
Kunskapstest: Promise-kedjning
Studera följande kodavsnitt i 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();Vilken blir den SLUTLIGA utskriften i konsolen, och i vilken ordning?
Repetition: Kedjning och kombination
Vi har lärt oss att hantera komplexa asynkrona arbetsflöden:
- Kedjning med
.then(): Sekvenserar operationer och skickar resultaten från ett steg till nästa. .pipe(): En äldre metod för att transformera värden eller mappa Deferred-objekt i en kedja.- Kombinering med
$.when(): Väntar på att flera oberoende Deferred-objekt ska slutföras parallellt innan den fortsätter och tillhandahåller deras resultat som separata argument.
Dessa mönster är avgörande för att bygga robusta och lättlästa asynkrona applikationer.
Lär dig JavaScript med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 22
- Lektioner
- 48
Vanliga frågor
Är lektionen ”Kedja och kombinera Promises” gratis?
Ja – du kan läsa vilka 3 lektioner som helst i lärvägen jQuery Academy, inklusive ”Kedja och kombinera Promises”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i jQuery Academy innehåller totalt 3 lektioner.
Vad lär jag mig i ”Kedja och kombinera Promises”?
Lär er att kedja flera asynkrona operationer med .then() och .pipe(), och kombinera komplexa arbetsflöden genom att vänta på att flera Promises ska slutföras med $.when(). Ni övar på jQuery Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig jQuery Academy?
Du behöver inga förkunskaper. Utbildningen i jQuery Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 2 av 3.
Hur lång tid tar lektionen ”Kedja och kombinera Promises”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här jQuery Academy-lektionen?
Ja. Varje jQuery Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Förstå Deferred-objekt
- Kedja och kombinera Promises
- Hantera flera asynkrona uppgifter