JavaScript Academy · Pelajaran

Membatalkan Permintaan dengan AbortController

Batalkan permintaan yang sedang berlangsung dengan rapi.

Membatalkan Permintaan dengan AbortController adalah pelajaran JavaScript Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. 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 JavaScript Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus JavaScript Academy mencakup 4 pelajaran total.

Mengapa Membatalkan Permintaan

Terkadang Anda memulai permintaan yang tidak lagi diperlukan: pengguna berpindah halaman, mengetik pencarian baru, atau batas waktu berakhir. AbortController memungkinkan Anda membatalkan fetch yang sedang berlangsung.

Membuat Controller

Buat sebuah AbortController. Objek ini menyediakan signal yang Anda teruskan ke fetch dan metode abort() untuk membatalkan.

const controller = new AbortController();
console.log(controller.signal); // an AbortSignal

Meneruskan Signal

Berikan sinyal controller kepada fetch melalui objek opsi. Kini permintaan tersebut dapat dibatalkan.

fetch(url, { signal: controller.signal });

Memanggil abort

Panggil controller.abort() untuk membatalkan. Promise fetch yang masih menunggu akan ditolak dengan AbortError.

const controller = new AbortController();
fetch(url, { signal: controller.signal });
controller.abort(); // cancels the request

Menangkap AbortError

Bedakan pembatalan yang disengaja dari kegagalan nyata dengan memeriksa err.name === "AbortError" dalam catch Anda.

try {
  await fetch(url, { signal: controller.signal });
} catch (err) {
  if (err.name === "AbortError") console.log("Cancelled");
  else throw err;
}

Pola timeout

Gabungkan dengan setTimeout untuk membatalkan permintaan yang lambat secara otomatis. Hapus pewaktu jika permintaan selesai lebih dahulu.

const c = new AbortController();
const t = setTimeout(() => c.abort(), 5000);
await fetch(url, { signal: c.signal });
clearTimeout(t);

Pembantu timeout Bawaan

Lingkungan modern menyediakan AbortSignal.timeout(ms), yang mengembalikan signal yang membatalkan dirinya secara otomatis. Cara ini lebih rapi daripada mengatur setTimeout sendiri.

fetch(url, { signal: AbortSignal.timeout(5000) });

Membatalkan Pencarian Sebelumnya

Untuk pencarian saat pengguna mengetik, batalkan permintaan sebelumnya sebelum memulai permintaan baru. Dengan begitu, respons lama tidak akan menimpa hasil terbaru.

let current = null;
function search(q) {
  if (current) current.abort();
  current = new AbortController();
  return fetch("/search?q=" + q, { signal: current.signal });
}

Satu Signal, Banyak Permintaan

Satu sinyal dapat membatalkan beberapa permintaan sekaligus. Teruskan sinyal yang sama ke beberapa fetch, lalu satu abort() akan membatalkan semuanya.

const c = new AbortController();
fetch(a, { signal: c.signal });
fetch(b, { signal: c.signal });
c.abort(); // cancels both

Signal yang Sudah Dibatalkan

Jika signal sudah dibatalkan saat diteruskan ke fetch, permintaan akan langsung ditolak. Periksa signal.aborted jika Anda perlu mengetahui statusnya.

if (controller.signal.aborted) console.log("already cancelled");

Pembersihan saat Komponen Dilepas

Dalam antarmuka pengguna berbasis komponen, batalkan permintaan yang masih berjalan ketika komponen dihancurkan agar Anda tidak menetapkan status pada sesuatu yang sudah tidak ada.

const controller = new AbortController();
// on teardown:
controller.abort();

Pemeriksaan Singkat

Membatalkan permintaan fetch.

Ringkasan

Buat AbortController, teruskan signal-nya ke fetch, lalu panggil abort() untuk membatalkan. Promise akan ditolak dengan AbortError yang dapat Anda deteksi berdasarkan namanya. Gunakan cara ini untuk timeout (AbortSignal.timeout), membatalkan pencarian sebelumnya, membatalkan beberapa permintaan, dan melakukan pembersihan saat pembongkaran.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Membatalkan Permintaan dengan AbortController” gratis?

Ya — teks lengkap “Membatalkan Permintaan dengan AbortController” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus JavaScript Academy, upgrade ke CoddyKit PRO. Kursus JavaScript Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Membatalkan Permintaan dengan AbortController”?

Batalkan permintaan yang sedang berlangsung dengan rapi. Kamu berlatih JavaScript 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 JavaScript Academy?

Tidak diperlukan pengalaman sebelumnya. JavaScript 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 4 dari 4.

Berapa lama pelajaran “Membatalkan Permintaan dengan AbortController” 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 JavaScript Academy ini?

Ya. Setiap pelajaran JavaScript 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

Membuat Permintaan GET
POST dan Mengirim Data
Menangani Error dan Kode Status
Membatalkan Permintaan dengan AbortController

← Kembali ke JavaScript Academy