jQuery Academy · Pelajaran

Merantai dan Menggubah Promise

Pelajari cara merantai berbilang operasi tak segerak menggunakan .then() dan .pipe(), serta menggubah aliran kerja kompleks dengan menunggu berbilang Promise selesai menggunakan $.when().

Pelajaran 2 daripada 311 langkah

Merantai dan Menggubah Promise ialah pelajaran jQuery Academy percuma di CoddyKit. Ini ialah pelajaran 2 daripada 3. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran jQuery Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus jQuery Academy merangkumi sejumlah 3 pelajaran.

Susun Operasi Tak Segerak

Dalam pembangunan web, kita sering perlu melaksanakan tugas tak segerak (seperti mendapatkan data) mengikut susunan tertentu. Merantaikan janji membolehkan kita melakukan perkara ini dengan kemas.

Daripada menyarang fungsi panggil balik, yang boleh menyebabkan masalah fungsi panggil balik yang bersarang terlalu kompleks, kita boleh memautkan operasi secara berurutan supaya kod lebih mudah dibaca dan diselenggara.

Merantaikan dengan .then()

Kaedah .then() ialah asas penting untuk perantaian. Apabila Deferred (atau Promise) diselesaikan, fungsi panggil balik .then() akan dilaksanakan. Nilai yang dikembalikan oleh fungsi panggil balik ini kemudiannya boleh digunakan oleh .then() seterusnya dalam rantaian.

Jika fungsi panggil balik mengembalikan Deferred baharu, rantaian akan menunggu Deferred baharu itu diselesaikan sebelum diteruskan.

Contoh Rantaian .then() Mudah

Mari lihat contoh mudah yang mensimulasikan dua langkah tak segerak. Langkah kedua hanya dijalankan selepas langkah pertama selesai dan menggunakan data daripada langkah pertama.

Perhatikan cara hasil step1 ('Data from Step 1') dihantar kepada 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 Rantaian .then()

Nilai yang dikembalikan oleh fungsi panggil balik .then() menentukan input untuk .then() seterusnya.

Jika Anda mengembalikan nilai bukan Deferred, nilai itu menjadi nilai yang diselesaikan untuk .then() seterusnya.
Jika Anda mengembalikan objek Deferred, rantaian akan berhenti seketika sehingga Deferred itu diselesaikan, kemudian nilai yang diselesaikan akan dihantar kepada .then() seterusnya.

Menggunakan .pipe() untuk Transformasi

Walaupun .then() ialah piawaian moden, .Deferred() jQuery turut menyediakan .pipe(). Fungsinya serupa dengan .then(), tetapi pada asalnya direka untuk mengubah nilai yang diselesaikan atau ditolak, atau menapis Deferred yang meneruskan rantaian.

.pipe() boleh digunakan untuk mengembalikan Deferred baharu yang diselesaikan dengan nilai yang telah diubah, lalu menyalurkannya ke peringkat seterusnya.

Contoh Transformasi .pipe()

Di sini, kita menggunakan .pipe() untuk mengambil hasil operasi pertama, mengubahnya (contohnya, menukarnya kepada huruf besar), kemudian menghantar nilai yang telah diubah kepada pengendali .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();
});

Menggabungkan dengan $.when()

Bagaimana jika Anda mempunyai beberapa tugas tak segerak yang tidak bergantung antara satu sama lain, tetapi perlu menunggu kesemuanya selesai sebelum meneruskan? Di sinilah $.when() digunakan.

$.when() menerima satu atau lebih objek Deferred (atau Promise) sebagai argumen dan mengembalikan Deferred baharu. Deferred baharu ini hanya diselesaikan apabila semua Deferred input telah diselesaikan.

Contoh Tugas Selari $.when()

Dalam contoh ini, kita mensimulasikan dua permintaan AJAX yang tidak bergantung antara satu sama lain (fetchUser dan fetchPosts). Kita menggunakan $.when() untuk menunggu kedua-duanya selesai sebelum mencatat hasil gabungan.

Perhatikan bahawa kedua-duanya berjalan secara selari, bukan secara 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()

Apabila Deferred yang dikembalikan oleh $.when() diselesaikan, fungsi panggil balik .done() atau .then() menerima nilai yang diselesaikan daripada setiap Deferred input sebagai argumen berasingan, mengikut susunan argumen tersebut dihantar kepada $.when().

Hal ini memudahkan penggabungan dan pemprosesan data daripada pelbagai sumber setelah semuanya tersedia.

Kuiz Perantaian Promise

Pertimbangkan petikan kod 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();

Apakah output FINAL yang dicetak pada konsol dan mengikut susunan apakah?

Jawab dalam pelajaran interaktif

Ulang Kaji: Perantaian & Penggabungan

Kita telah mempelajari cara mengurus aliran kerja tak segerak yang kompleks:

Perantaian dengan .then(): Menyusun operasi dan menghantar hasil dari satu peringkat ke peringkat seterusnya.
.pipe(): Kaedah lama untuk mengubah nilai atau memetakan Deferred dalam rantaian.
Penggabungan dengan $.when(): Menunggu beberapa Deferred yang tidak bergantung antara satu sama lain selesai secara selari sebelum meneruskan, sambil menyediakan hasilnya sebagai argumen berasingan.

Corak ini penting untuk membina aplikasi tak segerak yang teguh dan mudah dibaca.

Percuma untuk bermula

Pelajari JavaScript dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 22
Pelajaran: 48

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Merantai dan Menggubah Promise” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran jQuery Academy, termasuk “Merantai dan Menggubah Promise”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus jQuery Academy merangkumi sejumlah 3 pelajaran.

Apakah yang akan saya pelajari dalam “Merantai dan Menggubah Promise”?

Pelajari cara merantai berbilang operasi tak segerak menggunakan .then() dan .pipe(), serta menggubah aliran kerja kompleks dengan menunggu berbilang Promise selesai menggunakan $.when(). Anda berlatih jQuery Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan jQuery Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran jQuery Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 2 daripada 3.

Berapa lamakah pelajaran “Merantai dan Menggubah Promise” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran jQuery Academy ini?

Ya. Setiap pelajaran jQuery Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

Memahami Objek Deferred
Merantai dan Menggubah Promise
Mengendalikan Berbilang Tugas Tak Segerak

← Kembali ke jQuery Academy