Promise-objektien ketjuttaminen ja yhdistäminen
Oppikaa ketjuttamaan useita asynkronisia toimintoja metodeilla .then() ja .pipe() sekä kokoamaan monimutkaisia työnkulkuja odottamalla useiden Promise-objektien valmistumista metodilla $.when().
Promise-objektien ketjuttaminen ja yhdistäminen on ilmainen jQuery Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/3. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu jQuery Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. jQuery Academy-kurssilla on yhteensä 3 oppituntia.
Asynkronisten toimintojen suorittaminen järjestyksessä
Verkkokehityksessä on usein tarpeen suorittaa asynkronisia tehtäviä, kuten tietojen hakemista, tietyssä järjestyksessä. Promisien ketjuttamisen avulla tämä onnistuu selkeästi.
Callback-funktioiden sisäkkäisen käytön sijaan voimme yhdistää toiminnot peräkkäin. Näin koodia on paljon helpompi lukea ja ylläpitää, eikä syntyisi niin sanottua callback-helvettiä.
Ketjuttaminen .then()-metodilla
.then()-metodi on ketjuttamisen perusta. Kun Deferred (tai Promise) ratkaistaan, sen .then()-callback suoritetaan. Tämän callbackin palauttamaa arvoa voidaan sitten käyttää ketjun seuraavassa .then()-kutsussa.
Jos callback palauttaa uuden Deferred-objektin, ketju odottaa, että tämä uusi Deferred ratkaistaan, ennen kuin se jatkaa.
Yksinkertainen .then()-ketjun esimerkki
Tarkastellaan yksinkertaista esimerkkiä, jossa simuloimme kahta asynkronista vaihetta. Toinen vaihe suoritetaan vasta ensimmäisen valmistuttua, ja se käyttää ensimmäisen vaiheen tietoja.
Huomaa, kuinka step1-vaiheen tulos ('Data from Step 1') välitetään step2-vaiheelle.
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();
});Tietojen kulku .then()-ketjuissa
.then()-callbackin palauttama arvo määrittää seuraavan .then()-kutsun syötteen.
- Jos palautat muun kuin Deferred-arvon, siitä tulee seuraavan
.then()-kutsun ratkaistu arvo. - Jos palautat Deferred-objektin, ketju keskeytyy, kunnes Deferred ratkaistaan. Sen ratkaistu arvo välitetään sitten seuraavalle
.then()-kutsulle.
Muuntaminen .pipe()-metodilla
Vaikka .then() on nykyinen standardi, jQueryn .Deferred() tarjoaa myös .pipe()-metodin. Se muistuttaa .then()-metodia, mutta se suunniteltiin alun perin ratkaistun tai hylätyn arvon muuntamiseen tai sen määrittämiseen, mikä Deferred jatkaa ketjua.
.pipe()-metodilla voidaan palauttaa uusi Deferred, joka ratkaistaan muunnetulla arvolla. Arvo voidaan näin käytännössä ”putkittaa” seuraavaan vaiheeseen.
.pipe()-muunnoksen esimerkki
Tässä käytämme .pipe()-metodia ensimmäisen toiminnon tuloksen käsittelemiseen, sen muuntamiseen (esimerkiksi isoiksi kirjaimiksi) ja muunnetun arvon välittämiseen lopulliselle .done()-käsittelijälle.
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();
});Koostaminen $.when()-metodilla
Mitä jos käytettävissäsi on useita toisistaan riippumattomia asynkronisia tehtäviä, mutta haluat jatkaa vasta, kun kaikki ne ovat valmistuneet? Tähän tarkoitukseen käytetään $.when()-metodia.
$.when() vastaanottaa argumentteina yhden tai useamman Deferred-objektin (tai Promisen) ja palauttaa uuden Deferred-objektin. Tämä uusi Deferred ratkaistaan vasta, kun kaikki syötteenä annetut Deferred-objektit on ratkaistu.
$.when()-metodin rinnakkaisten tehtävien esimerkki
Tässä esimerkissä simuloimme kahta toisistaan riippumatonta AJAX-pyyntöä (fetchUser ja fetchPosts). Käytämme $.when()-metodia odottamaan, että molemmat valmistuvat, ennen yhdistettyjen tulosten kirjaamista.
Huomaa, että ne suoritetaan rinnakkain, ei peräkkäin.
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();
});$.when()-metodin tulosten käsittely
Kun $.when()-metodin palauttama Deferred ratkaistaan, sen .done()- tai .then()-callbackit saavat kunkin syötteenä annetun Deferred-objektin ratkaistut arvot erillisinä argumentteina siinä järjestyksessä, jossa objektit välitettiin $.when()-metodille.
Näin useista lähteistä peräisin olevat tiedot on helppo yhdistää ja käsitellä, kun kaikki ne ovat saatavilla.
Promisen ketjutuksen tietovisa
Tarkastele seuraavaa jQuery-koodikatkelmaa:
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();Mikä tulostuu konsoliin LOPULLISESSA tulosteessa ja missä järjestyksessä?
Kertaus: ketjuttaminen ja koostaminen
Olet oppinut hallitsemaan monimutkaisia asynkronisia työnkulkuja:
- Ketjuttaminen
.then()-metodilla: Suorittaa toiminnot peräkkäin ja välittää tulokset vaiheesta seuraavaan. .pipe(): Vanhempi metodi arvojen muuntamiseen tai Deferred-objektien yhdistämiseen ketjussa.- Koostaminen
$.when()-metodilla: Odottaa, että useat toisistaan riippumattomat Deferred-objektit valmistuvat rinnakkain, ennen jatkamista, ja tarjoaa niiden tulokset erillisinä argumentteina.
Nämä mallit ovat keskeisiä vankkojen ja helposti luettavien asynkronisten sovellusten rakentamisessa.
Opi JavaScript tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 22
- Oppitunnit
- 48
Usein kysytyt kysymykset
Onko oppitunti ”Promise-objektien ketjuttaminen ja yhdistäminen” ilmainen?
Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa jQuery Academy-oppimispolun 3 oppituntia, myös oppitunnin “Promise-objektien ketjuttaminen ja yhdistäminen”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. jQuery Academy-kurssilla on yhteensä 3 oppituntia.
Mitä opin oppitunnilla ”Promise-objektien ketjuttaminen ja yhdistäminen”?
Oppikaa ketjuttamaan useita asynkronisia toimintoja metodeilla .then() ja .pipe() sekä kokoamaan monimutkaisia työnkulkuja odottamalla useiden Promise-objektien valmistumista metodilla $.when(). Harjoittelet jQuery Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni jQuery Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin jQuery Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 2/3.
Kuinka kauan ”Promise-objektien ketjuttaminen ja yhdistäminen”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä jQuery Academy-oppitunnilla?
Kyllä. Jokainen jQuery Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- Deferred-objektien ymmärtäminen
- Promise-objektien ketjuttaminen ja yhdistäminen
- Useiden asynkronisten tehtävien käsittely