jQuery Academy · Pelajaran

Menangani Beberapa Tugas Asinkron

Kuasai cara mengoordinasikan beberapa tugas asinkron yang saling independen atau bergantung, dengan memastikan urutan eksekusi dan penanganan kesalahan yang tepat pada semua operasi.

Menangani Beberapa Tugas Asinkron adalah pelajaran jQuery Academy gratis di CoddyKit. Ini adalah pelajaran 3 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.

Mengapa Mengoordinasikan Tugas Asinkron?

Dalam pengembangan web, banyak operasi bersifat asinkron. Artinya, operasi tersebut tidak terjadi secara langsung atau dalam urutan yang ketat. Contohnya adalah mengambil data dari server, memuat gambar, atau menjalankan animasi.

Ketika aplikasi Anda perlu menjalankan beberapa tugas ini sekaligus atau dalam urutan tertentu, Anda memerlukan cara untuk mengoordinasikannya secara efektif. Pelajaran ini akan menunjukkan caranya!

Tantangan Menangani Banyak Tugas

Bayangkan Anda perlu memuat profil pengguna dan notifikasi terbarunya. Keduanya merupakan permintaan server yang terpisah.

Bagaimana Anda mengetahui bahwa keduanya telah selesai?
Bagaimana jika salah satunya gagal?
Bagaimana jika salah satunya bergantung pada yang lain (misalnya, mengambil notifikasi untuk ID pengguna tertentu yang ditemukan dalam profil)?

Tanpa koordinasi yang tepat, UI Anda mungkin menampilkan data yang tidak lengkap atau bahkan berhenti berfungsi.

Memperkenalkan `$.when()` untuk Pemrosesan Paralel

$.when() milik jQuery merupakan alat yang ampuh untuk mengoordinasikan beberapa operasi asinkron independen. Fungsi ini menerima satu atau beberapa objek Deferred/Promise sebagai argumen.

$.when() mengembalikan Promise utama yang akan diselesaikan ketika semua Promise individual yang diteruskan kepadanya telah diselesaikan. Jika salah satu di antaranya ditolak, Promise utama akan langsung ditolak.

Contoh `$.when()`: Pengambilan Data Paralel

Mari kita simulasikan pengambilan dua kumpulan data yang berbeda secara paralel. Kita akan menggunakan $.Deferred() untuk meniru permintaan AJAX sebagai demonstrasi.

Cobalah menjalankan kode ini:

// Assume jQuery is loaded in the environment
$(function() {
  function fetchData(name, delay) {
    let dfd = $.Deferred();
    setTimeout(function() {
      console.log(`Finished fetching ${name}`);
      dfd.resolve(`Data for ${name}`);
    }, delay);
    return dfd.promise();
  }

  let profilePromise = fetchData("User Profile", 1500);
  let settingsPromise = fetchData("App Settings", 800);

  console.log("Starting parallel fetches...");

  $.when(profilePromise, settingsPromise)
    .done(function(profileData, settingsData) {
      console.log("All data loaded successfully!");
      console.log(`Profile: ${profileData}`);
      console.log(`Settings: ${settingsData}`);
    });
});

Menangani Hasil `$.when()`

Ketika Promise $.when() diselesaikan, callback .done() miliknya menerima nilai yang telah diselesaikan dari setiap Promise asli sebagai argumen terpisah.

Jika Anda meneruskan N Promise ke $.when(), callback .done() akan menerima N argumen.
Argumen tersebut memiliki urutan yang sama dengan urutan Promise yang diteruskan ke $.when().

Hal ini memudahkan Anda mengolah semua hasil setelah semuanya siap.

Penanganan Kesalahan `$.when()`

Apa yang terjadi jika salah satu operasi paralel gagal? Promise utama milik $.when() akan langsung ditolak jika salah satu Promise individual ditolak.

Callback .fail() kemudian akan dipicu dan menerima alasan penolakan dari Promise pertama yang gagal. Operasi paralel lainnya tetap akan selesai, tetapi $.when() sudah memberi tanda bahwa terjadi kegagalan.

Contoh: `$.when()` dengan Kegagalan

Mari kita ubah contoh sebelumnya agar salah satu pengambilan data gagal. Amati keluarannya:

// Assume jQuery is loaded in the environment
$(function() {
  function fetchData(name, delay, shouldSucceed = true) {
    let dfd = $.Deferred();
    setTimeout(function() {
      if (shouldSucceed) {
        console.log(`Finished fetching ${name}`);
        dfd.resolve(`Data for ${name}`);
      } else {
        console.log(`Failed to fetch ${name}`);
        dfd.reject(`Error: ${name} could not be loaded`);
      }
    }, delay);
    return dfd.promise();
  }

  let profilePromise = fetchData("User Profile", 1500, true);
  let settingsPromise = fetchData("App Settings", 800, false); // This one will fail

  console.log("Starting parallel fetches (one will fail)...");

  $.when(profilePromise, settingsPromise)
    .done(function(profileData, settingsData) {
      console.log("All data loaded successfully! (This won't run)");
    })
    .fail(function(errorReason) {
      console.log("One or more operations failed!");
      console.log(`Reason: ${errorReason}`);
    });
});

Mengoordinasikan Tugas yang Saling Bergantung

Terkadang, tugas tidak bersifat independen. Anda mungkin perlu:

Mengambil ID pengguna.
Kemudian, menggunakan ID tersebut untuk mengambil detail pengguna.
Kemudian, menggunakan detail tersebut untuk mengambil postingan khusus miliknya.

Hal ini memerlukan rangkaian berurutan operasi asinkron, dengan setiap langkah bergantung pada keberhasilan dan hasil langkah sebelumnya. Kita mewujudkannya dengan merangkai .then() atau .pipe().

Contoh: Merangkai AJAX yang Saling Bergantung

Berikut cara merangkai dua panggilan AJAX yang disimulasikan, dengan panggilan kedua bergantung pada hasil panggilan pertama. Perhatikan bahwa nilai yang dikembalikan .then() pertama menjadi masukan untuk .then() berikutnya.

// Assume jQuery is loaded in the environment
$(function() {
  function fetchUserId() {
    let dfd = $.Deferred();
    setTimeout(() => {
      console.log("User ID fetched: 123");
      dfd.resolve(123);
    }, 500);
    return dfd.promise();
  }

  function fetchUserDetails(userId) {
    let dfd = $.Deferred();
    setTimeout(() => {
      if (userId === 123) {
        console.log(`Details fetched for user ${userId}`);
        dfd.resolve(`Details for User ${userId}`);
      } else {
        dfd.reject("Invalid User ID");
      }
    }, 700);
    return dfd.promise();
  }

  console.log("Starting dependent fetch chain...");

  fetchUserId()
    .then(function(id) {
      return fetchUserDetails(id); // Return a new promise
    })
    .done(function(details) {
      console.log("Full chain successful!");
      console.log(`Final Result: ${details}`);
    })
    .fail(function(error) {
      console.log("Chain failed:", error);
    });
});

Uji Pengetahuan Anda

Perhatikan skenario ketika Anda ingin memuat profil pengguna dan daftar temannya. Permintaan daftar teman memerlukan ID pengguna, yang merupakan bagian dari data profil.

Pendekatan jQuery mana yang paling sesuai untuk koordinasi khusus ini?

Rangkuman: Menguasai Koordinasi Asinkron

Anda telah mempelajari cara menangani beberapa tugas asinkron secara efektif!

$.when(): Ideal untuk menjalankan tugas-tugas independen secara paralel dan menunggu hingga semuanya selesai atau salah satunya gagal.
Merangkai dengan .then(): Sangat sesuai untuk tugas-tugas yang saling bergantung, ketika keluaran suatu operasi diperlukan oleh operasi berikutnya.
Penanganan Kesalahan: Baik $.when() maupun Promise yang dirangkai menyediakan .fail() untuk menangkap penolakan kapan pun terjadi, sehingga aplikasi Anda lebih tangguh.

Pola-pola ini penting untuk membangun aplikasi web jQuery yang dinamis dan responsif.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Menangani Beberapa Tugas Asinkron” gratis?

Ya — teks lengkap “Menangani Beberapa Tugas Asinkron” 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 “Menangani Beberapa Tugas Asinkron”?

Kuasai cara mengoordinasikan beberapa tugas asinkron yang saling independen atau bergantung, dengan memastikan urutan eksekusi dan penanganan kesalahan yang tepat pada semua operasi. 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 3 dari 3.

Berapa lama pelajaran “Menangani Beberapa Tugas Asinkron” 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

← Kembali ke jQuery Academy