0Pricing
jQuery Academy · Pelajaran

Memahami Objek Deferred

Pahami konsep inti objek Deferred jQuery, cara objek tersebut merepresentasikan operasi asinkron, serta statusnya (menunggu, terselesaikan, ditolak).

Memahami Objek Deferred adalah pelajaran jQuery Academy gratis di CoddyKit. Ini adalah pelajaran 1 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.

Operasi Asinkron & Callback

Dalam pengembangan web, banyak tugas tidak terjadi secara langsung. Misalnya, mengambil data dari server atau menunggu klik pengguna. Semua itu merupakan operasi asinkron.

Secara tradisional, kita menggunakan callback: fungsi yang hanya dijalankan setelah tugas asinkron selesai. Namun, callback yang bersarang dapat menyebabkan "callback hell", sehingga kode sulit dibaca dan dipelihara.

Mengenal jQuery Deferred

Di sinilah objek Deferred milik jQuery dapat membantu! Objek Deferred adalah cara yang ampuh untuk mengelola operasi asinkron dengan lebih rapi.

Objek ini bertindak seperti penampung sementara untuk hasil di masa mendatang. Anda dapat memasang fungsi yang akan dijalankan saat operasi selesai, baik berhasil maupun gagal, tanpa memblokir kode utama.

Tiga Status Deferred

Sebuah objek Deferred dapat berada dalam salah satu dari tiga status berikut, yang mencerminkan status tugas asinkron yang diwakilinya:

  • Pending: Status awal. Operasi belum selesai.
  • Resolved: Operasi selesai dengan berhasil.
  • Rejected: Operasi gagal atau mengalami error.

Setelah berstatus resolved atau rejected, status objek Deferred tidak dapat diubah lagi.

Membuat Objek Deferred

Anda dapat membuat objek Deferred baru menggunakan $.Deferred(). Objek ini dimulai dalam status pending.

Objek tersebut menyediakan metode untuk mengubah statusnya dan mendaftarkan fungsi callback yang akan dijalankan ketika status berubah.

Cobalah membuatnya:

var myDeferred = $.Deferred();
console.log('Deferred is pending: ' + (myDeferred.state() === 'pending'));

Menandai Keberhasilan: .resolve()

Ketika operasi asinkron Anda selesai dengan berhasil, panggil metode .resolve() pada objek Deferred Anda.

Tindakan ini mengubah statusnya dari pending menjadi resolved. Argumen apa pun yang Anda berikan kepada .resolve() akan diteruskan ke callback success.

Amati perubahan statusnya:

var myDeferred = $.Deferred();
console.log('Initial state: ' + myDeferred.state());

setTimeout(function() {
  myDeferred.resolve('Data fetched!');
  console.log('New state: ' + myDeferred.state());
}, 1000);

Menandai Kegagalan: .reject()

Jika operasi asinkron Anda gagal, panggil metode .reject().

Tindakan ini mengubah status Deferred dari pending menjadi rejected. Argumen yang diteruskan kepada .reject() akan dikirim ke callback failure, biasanya berupa pesan error.

Lihat cara kerja penolakan:

var myDeferred = $.Deferred();
console.log('Initial state: ' + myDeferred.state());

setTimeout(function() {
  myDeferred.reject('Network error!');
  console.log('New state: ' + myDeferred.state());
}, 1000);

Menangani Keberhasilan dengan .done()

Untuk merespons operasi yang berhasil (ketika Deferred berstatus resolved), pasang fungsi callback menggunakan metode .done().

Fungsi ini hanya akan dijalankan jika .resolve() dipanggil dan akan menerima argumen yang diteruskan oleh .resolve().

Mari proses beberapa data:

var fetchData = function() {
  var dfd = $.Deferred();
  setTimeout(function() {
    var success = true; // Simulate success
    if (success) {
      dfd.resolve('User data loaded.');
    } else {
      dfd.reject('Failed to load user data.');
    }
  }, 1000);
  return dfd;
};

fetchData().done(function(message) {
  console.log('Success handler: ' + message);
});

Menangani Kegagalan dengan .fail()

Demikian pula, untuk menangani error (ketika Deferred berstatus rejected), gunakan metode .fail().

Fungsi callback yang diteruskan kepada .fail() hanya akan dijalankan jika .reject() dipanggil dan akan menerima argumen-argumennya.

Mari simulasikan sebuah error:

var fetchData = function() {
  var dfd = $.Deferred();
  setTimeout(function() {
    var success = false; // Simulate failure
    if (success) {
      dfd.resolve('User data loaded.');
    } else {
      dfd.reject('Failed to load user data.');
    }
  }, 1000);
  return dfd;
};

fetchData().fail(function(errorMessage) {
  console.log('Error handler: ' + errorMessage);
});

Selalu Berjalan: .always()

Terkadang, ada kode yang perlu dijalankan terlepas dari berhasil atau gagalnya operasi asinkron. Di sinilah .always() berperan.

Fungsi callback yang dipasang dengan .always() akan dijalankan baik ketika Deferred berstatus resolved maupun rejected.

Gunakan .always() untuk pembersihan atau pembaruan UI terakhir:

var fetchData = function(shouldSucceed) {
  var dfd = $.Deferred();
  setTimeout(function() {
    if (shouldSucceed) {
      dfd.resolve('Data received!');
    } else {
      dfd.reject('Request failed!');
    }
  }, 1000);
  return dfd;
};

fetchData(false)
  .done(function(msg) { console.log('Success: ' + msg); })
  .fail(function(err) { console.log('Failure: ' + err); })
  .always(function() { console.log('Operation finished.'); });

Melindungi dengan .promise()

Ketika Anda mengembalikan objek Deferred dari sebuah fungsi, Anda mungkin tidak ingin kode eksternal dapat mengubah statusnya (misalnya, memanggil .resolve() atau .reject() secara langsung).

Metode .promise() mengembalikan versi "hanya-baca" dari objek Deferred. Versi ini hanya menyediakan metode untuk memasang callback (seperti .done(), .fail(), dan .always()), bukan untuk mengubah statusnya.

var createAsyncTask = function() {
  var dfd = $.Deferred();
  setTimeout(function() {
    dfd.resolve('Task done!');
  }, 500);
  // Return only the promise, not the full Deferred object
  return dfd.promise();
};

var taskPromise = createAsyncTask();
taskPromise.done(function(msg) {
  console.log(msg);
});

// The following would throw an error or do nothing if trying to resolve/reject a promise
// taskPromise.resolve('Attempted to resolve externally'); // This is not possible on a promise object

Uji Pengetahuan Anda

Manakah dari metode berikut yang akan Anda gunakan untuk mendaftarkan callback yang dijalankan ONLY ketika objek Deferred berhasil menyelesaikan operasinya secara asinkron?

Rangkuman: Dasar-Dasar Deferred

Bagus sekali! Dalam pelajaran ini, Anda telah memahami konsep-konsep inti objek Deferred jQuery:

  • Objek tersebut mengelola operasi asinkron sehingga menghindari kekacauan callback.
  • Objek tersebut memiliki status menunggu, terselesaikan, atau ditolak.
  • Gunakan .resolve() untuk keberhasilan dan .reject() untuk kegagalan.
  • Callback ditambahkan dengan .done() (keberhasilan), .fail() (kegagalan), dan .always() (keduanya).
  • .promise() mengembalikan objek hanya-baca untuk melindungi manipulasi status.

Selanjutnya, kita akan mempelajari cara merangkai dan menyusun objek-objek yang hebat ini!

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Memahami Objek Deferred” gratis?

Ya — teks lengkap “Memahami Objek Deferred” 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 “Memahami Objek Deferred”?

Pahami konsep inti objek Deferred jQuery, cara objek tersebut merepresentasikan operasi asinkron, serta statusnya (menunggu, terselesaikan, ditolak). 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 1 dari 3.

Berapa lama pelajaran “Memahami Objek Deferred” 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

  1. Memahami Objek Deferred
  2. Merangkai dan Mengomposisikan Promise
  3. Menangani Beberapa Tugas Asinkron
← Kembali ke jQuery Academy