Menangani Kesalahan dan Keberhasilan AJAX
Terapkan mekanisme penanganan kesalahan yang tangguh dengan callback .fail() dan .always(), serta proses pengambilan data yang berhasil dengan .done() untuk aplikasi yang tahan gangguan.
Menangani Kesalahan dan Keberhasilan AJAX 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.
Menangani Hasil Operasi Asinkron
Saat Anda membuat permintaan AJAX, operasi tersebut bersifat asinkron. Artinya, kode Anda tidak menunggu respons dari server; kode tersebut terus menjalankan tugas lainnya.
Untuk menangani balasan server (atau ketiadaan balasan), jQuery menyediakan metode khusus yang disebut callback. Fungsi-fungsi ini hanya dijalankan ketika peristiwa tertentu terjadi, seperti keberhasilan atau kegagalan.
Saat Semuanya Berjalan Lancar
Callback .done() adalah pilihan utama Anda untuk menangani permintaan AJAX yang berhasil. Callback ini dijalankan ketika server memberikan respons dengan kode status yang menunjukkan keberhasilan (biasanya 200–299).
- Callback ini menerima data yang dikembalikan oleh server.
- Callback ini sangat cocok digunakan untuk memperbarui UI dengan informasi terbaru.
Menampilkan Data yang Berhasil Diterima
Mari kita ambil beberapa data dan menampilkannya ketika permintaan berhasil. Perhatikan bahwa .done() dirangkaikan ke pemanggilan $.ajax().
$(document).ready(function() {
$.ajax({
url: "https://jsonplaceholder.typicode.com/posts/1",
method: "GET"
})
.done(function(data) {
console.log("Success! Data received:");
console.log(data.title); // Access a property
$('body').append('<p>Post Title: ' + data.title + '</p>');
});
});Saat Terjadi Masalah
Namun, bagaimana jika server tidak dapat memenuhi permintaan Anda? Di sinilah callback .fail() digunakan. Callback ini dijalankan ketika permintaan AJAX mengalami kesalahan, seperti 404 (Tidak Ditemukan) atau 500 (Kesalahan Server).
- Callback ini membantu Anda memberi tahu pengguna atau mencatat masalah.
- Callback ini menerima detail tentang kesalahan tersebut.
Menanggapi Kegagalan
Mari kita coba mengambil data dari URL yang tidak ada. Callback .fail() akan menangkap kesalahan tersebut dan mencatat detailnya.
$(document).ready(function() {
$.ajax({
url: "https://jsonplaceholder.typicode.com/nonexistent", // This URL will fail
method: "GET"
})
.done(function(data) {
console.log("This won't run on error.");
})
.fail(function(jqXHR, textStatus, errorThrown) {
console.log("Error! Status: " + textStatus);
console.log("HTTP Error: " + errorThrown);
$('body').append('<p>Error fetching data!</p>');
$('body').append('<p>Status: ' + textStatus + '</p>');
});
});Memahami Parameter Kesalahan
Callback .fail() menyediakan tiga parameter berguna untuk membantu Anda memahami apa yang terjadi:
jqXHR: Objek jQuery XMLHttpRequest yang menyediakan detail tingkat rendah.textStatus: String yang menjelaskan jenis kesalahan (misalnya, "timeout", "error", "abort").errorThrown: Teks status HTTP (misalnya, "Not Found" untuk 404).
Gunakan parameter ini untuk memberikan informasi yang spesifik kepada pengguna Anda.
Selalu Berjalan, Apa Pun yang Terjadi
Terkadang, Anda perlu melakukan suatu tindakan terlepas dari apakah permintaan AJAX berhasil atau gagal. Inilah tugas callback .always().
- Callback ini selalu dijalankan setelah salah satu dari
.done()atau.fail(). - Callback ini cocok untuk tugas pembersihan, seperti menyembunyikan indikator pemuatan atau mengaktifkan kembali tombol.
Melakukan Pembersihan
Mari kita tambahkan .always() ke contoh sebelumnya. Kita akan menyimulasikan keadaan pemuatan dan memastikan keadaan tersebut dihapus, baik permintaan berhasil maupun gagal.
$(document).ready(function() {
$('body').append('<p id="status">Loading data...</p>'); // Simulate loading
$.ajax({
url: "https://jsonplaceholder.typicode.com/posts/1", // Try changing to 'nonexistent' to see fail+always
method: "GET"
})
.done(function(data) {
console.log("Success! Data: " + data.title);
$('#status').text('Data loaded successfully!');
})
.fail(function(jqXHR, textStatus, errorThrown) {
console.log("Failed! " + textStatus);
$('#status').text('Failed to load data!');
})
.always(function() {
console.log("Request finished (success or failure).");
// This could be where you hide a spinner or re-enable a button
$('#status').append(' (Finished)');
});
});Mengatur Callback Anda
Metode AJAX jQuery mengembalikan objek yang mirip janji, sehingga Anda dapat merangkaikan metode .done(), .fail(), dan .always() secara langsung.
Perangkaian ini membuat kode Anda lebih rapi dan mudah dibaca, serta memisahkan dengan jelas blok logika keberhasilan, kesalahan, dan penyelesaian.
Uji Pemahaman Anda
Perhatikan permintaan AJAX jQuery berikut:
$.ajax({
url: "/api/data",
method: "GET"
})
.done(function() {
console.log("A");
})
.fail(function() {
console.log("B");
})
.always(function() {
console.log("C");
});
Jika server memberikan respons berupa kesalahan 404 Not Found, apa yang akan dicetak ke konsol?
Merangkum Penanganan AJAX
Anda telah menguasai callback penting untuk penanganan AJAX yang tangguh:
.done(): Untuk respons yang berhasil..fail(): Untuk menangani kesalahan..always(): Untuk tindakan yang harus dijalankan apa pun yang terjadi.
Dengan menggunakannya, aplikasi Anda dapat menangani interaksi jaringan dengan baik, sehingga memberikan pengalaman yang lebih baik bagi pengguna meskipun segala sesuatunya tidak berjalan sesuai rencana!
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Menangani Kesalahan dan Keberhasilan AJAX” gratis?
Ya — teks lengkap “Menangani Kesalahan dan Keberhasilan AJAX” 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 Kesalahan dan Keberhasilan AJAX”?
Terapkan mekanisme penanganan kesalahan yang tangguh dengan callback .fail() dan .always(), serta proses pengambilan data yang berhasil dengan .done() untuk aplikasi yang tahan gangguan. 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 “Menangani Kesalahan dan Keberhasilan AJAX” 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
- Konfigurasi Permintaan AJAX secara Efektif
- Menangani Kesalahan dan Keberhasilan AJAX
- AJAX Lintas Domain (CORS/JSONP)