Merangkai dan Mengomposisikan Promise
Pelajari cara merangkai beberapa operasi asinkron menggunakan .then() dan .pipe(), serta mengomposisikan alur kerja kompleks dengan menunggu beberapa Promise selesai menggunakan $.when().
Merangkai dan Mengomposisikan Promise adalah pelajaran jQuery Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 3. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar jQuery Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus jQuery Academy mencakup 3 pelajaran total.
Mengurutkan Operasi Asinkron
Dalam pengembangan web, kita sering perlu menjalankan tugas asinkron (seperti mengambil data) dalam urutan tertentu. Merangkai promise memungkinkan kita melakukannya dengan rapi.
Alih-alih menumpuk callback, yang dapat menyebabkan "kekacauan callback", kita dapat menghubungkan operasi secara berurutan sehingga kode jauh lebih mudah dibaca dan dipelihara.
Merangkai dengan .then()
Metode .then() merupakan dasar untuk perangkaian. Ketika Deferred (atau Promise) diselesaikan, callback .then() miliknya dijalankan. Nilai yang dikembalikan callback ini kemudian dapat digunakan oleh .then() berikutnya dalam rangkaian.
Jika callback mengembalikan Deferred baru, rangkaian akan menunggu Deferred baru tersebut diselesaikan sebelum melanjutkan.
Contoh Rangkaian .then() Sederhana
Mari kita lihat contoh sederhana yang mensimulasikan dua langkah asinkron. Langkah kedua hanya dijalankan setelah langkah pertama selesai, dan menggunakan data dari langkah pertama.
Perhatikan bahwa hasil step1 ('Data from Step 1') diteruskan ke 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();
});Aliran Data dalam Rangkaian .then()
Nilai yang dikembalikan callback .then() menentukan masukan untuk .then() berikutnya.
- Jika Anda mengembalikan nilai non-Deferred, nilai tersebut menjadi nilai yang diselesaikan untuk
.then()berikutnya. - Jika Anda mengembalikan objek Deferred, rangkaian akan berhenti sementara sampai Deferred tersebut diselesaikan, lalu nilainya yang telah diselesaikan diteruskan ke
.then()berikutnya.
Menggunakan .pipe() untuk Transformasi
Meskipun .then() merupakan standar modern, .Deferred() jQuery juga menyediakan .pipe(). Fungsinya mirip dengan .then(), tetapi awalnya dirancang untuk mentransformasi nilai yang diselesaikan atau ditolak, atau untuk memfilter Deferred yang melanjutkan rangkaian.
.pipe() dapat digunakan untuk mengembalikan Deferred baru yang diselesaikan dengan nilai yang telah ditransformasi, sehingga secara efektif "menyalurkan" nilai tersebut ke tahap berikutnya.
Contoh Transformasi .pipe()
Di sini, kita menggunakan .pipe() untuk mengambil hasil operasi pertama, mentransformasinya (misalnya, mengubahnya menjadi huruf besar), lalu meneruskan nilai yang telah ditransformasi ke penangan .done() terakhir.
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();
});Menyusun dengan $.when()
Bagaimana jika Anda memiliki beberapa tugas asinkron yang independen, tetapi perlu menunggu hingga semuanya selesai sebelum melanjutkan? Di sinilah $.when() berguna.
$.when() menerima satu atau beberapa objek Deferred (atau Promise) sebagai argumen dan mengembalikan Deferred baru. Deferred baru ini hanya diselesaikan ketika semua Deferred masukan telah diselesaikan.
Contoh Tugas Paralel $.when()
Dalam contoh ini, kita mensimulasikan dua permintaan AJAX independen (fetchUser dan fetchPosts). Kita menggunakan $.when() untuk menunggu keduanya selesai sebelum mencatat hasil gabungannya.
Perhatikan bahwa keduanya berjalan secara paralel, bukan berurutan.
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();
});Mengakses Hasil $.when()
Ketika Deferred yang dikembalikan oleh $.when() diselesaikan, callback .done() atau .then() miliknya menerima nilai yang telah diselesaikan dari setiap Deferred masukan sebagai argumen terpisah, sesuai urutan penerusannya ke $.when().
Hal ini memudahkan penggabungan dan pemrosesan data dari beberapa sumber setelah semuanya tersedia.
Kuis Perangkaian Promise
Perhatikan cuplikan kode jQuery berikut:
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();Apa keluaran FINAL yang dicetak ke konsol, dan dalam urutan apa?
Rangkuman: Merangkai & Menyusun
Kita telah mempelajari cara mengelola alur kerja asinkron yang kompleks:
- Merangkai dengan
.then(): Mengurutkan operasi dan meneruskan hasil dari satu tahap ke tahap berikutnya. .pipe(): Metode lama untuk mentransformasi nilai atau memetakan Deferred dalam suatu rangkaian.- Menyusun dengan
$.when(): Menunggu beberapa Deferred independen selesai secara paralel sebelum melanjutkan, serta menyediakan hasilnya sebagai argumen terpisah.
Pola-pola ini penting untuk membangun aplikasi asinkron yang tangguh dan mudah dibaca.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Merangkai dan Mengomposisikan Promise” gratis?
Ya — teks lengkap “Merangkai dan Mengomposisikan Promise” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus jQuery Academy, upgrade ke CoddyKit PRO. Kursus jQuery Academy mencakup 3 pelajaran total.
Apa yang akan aku pelajari di “Merangkai dan Mengomposisikan Promise”?
Pelajari cara merangkai beberapa operasi asinkron menggunakan .then() dan .pipe(), serta mengomposisikan alur kerja kompleks dengan menunggu beberapa Promise selesai menggunakan $.when(). Kamu berlatih jQuery Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai jQuery Academy?
Tidak diperlukan pengalaman sebelumnya. jQuery Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 3.
Berapa lama pelajaran “Merangkai dan Mengomposisikan Promise” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran jQuery Academy ini?
Ya. Setiap pelajaran jQuery Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Memahami Objek Deferred
- Merangkai dan Mengomposisikan Promise
- Menangani Beberapa Tugas Asinkron