Frontend Academy · Pelajaran

AbortController untuk Pembersihan

Buat AbortController, teruskan signal-nya ke fetch, dan batalkan permintaan yang sedang berlangsung dalam fungsi pembersihan untuk mencegah pembaruan state pada komponen yang sudah dilepas.

AbortController untuk Pembersihan adalah pelajaran Frontend 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 Frontend Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Frontend Academy mencakup 4 pelajaran total.

Mengapa Membatalkan Permintaan Pengambilan Data?

Ketika komponen dilepas atau mengambil ulang data, permintaan sebelumnya mungkin masih berlangsung. Jika permintaan tersebut selesai setelah permintaan baru, data usang akan menimpa data terbaru. AbortController membatalkan permintaan yang sedang berlangsung dengan rapi.

Dasar-Dasar AbortController

Buat AbortController, teruskan signal-nya ke fetch, lalu panggil controller.abort() untuk membatalkan. Fetch menghasilkan AbortError ketika dibatalkan.

const controller = new AbortController();

try {
  const res = await fetch('/api/data', { signal: controller.signal });
  const data = await res.json();
  setData(data);
} catch (err) {
  if (err instanceof DOMException && err.name === 'AbortError') {
    console.log('Request was cancelled');
  } else {
    setError((err as Error).message);
  }
}

// To cancel:
controller.abort();

Dalam Pembersihan useEffect

Buat AbortController di awal efek dan panggil abort() dalam fungsi pembersihan. Cara ini secara otomatis membatalkan permintaan ketika dependensi berubah atau komponen dilepas.

useEffect(() => {
  const controller = new AbortController();

  async function load() {
    try {
      const res = await fetch(`/api/user/${userId}`, { signal: controller.signal });
      if (!res.ok) throw new Error(`${res.status}`);
      setUser(await res.json());
    } catch (err) {
      if ((err as DOMException).name !== 'AbortError') {
        setError((err as Error).message);
      }
    }
  }

  load();
  return () => controller.abort();
}, [userId]);

AbortError vs Kesalahan Jaringan

Permintaan yang dibatalkan menghasilkan DOMException dengan nama 'AbortError'. Selalu periksa kondisi ini secara khusus dan jangan menampilkannya sebagai kesalahan yang terlihat oleh pengguna — pembatalan tersebut merupakan perilaku pembersihan yang diharapkan.

Properti signal.aborted

Periksa controller.signal.aborted untuk menguji apakah signal telah dibatalkan. Hal ini berguna untuk melakukan pemeriksaan sebelum pemanggilan setState dalam kode asinkron.

const data = await fetchData();
if (!controller.signal.aborted) {
  setData(data); // safe to update state
}

Membatalkan Beberapa Permintaan

Satu AbortController dapat membatalkan beberapa permintaan pengambilan data dengan meneruskan signal yang sama ke semuanya.

const controller = new AbortController();
const { signal } = controller;

await Promise.all([
  fetch('/api/users',    { signal }),
  fetch('/api/products', { signal }),
  fetch('/api/settings', { signal }),
]);

controller.abort(); // cancels all three

AbortController dengan Axios

Axios mendukung signal AbortController melalui opsi signal dalam konfigurasi. Antarmuka signal-nya sama seperti pada fetch.

const controller = new AbortController();
await axios.get('/api/data', { signal: controller.signal });

// In cleanup:
return () => controller.abort();

React Query Menangani Hal Ini Secara Otomatis

Saat menggunakan TanStack Query (React Query), pembatalan ditangani untuk Anda. React Query membuat dan membatalkan controller secara internal. Inilah salah satu alasan untuk lebih memilihnya daripada pola pengambilan data manual.

Batas Waktu dengan AbortController

Gabungkan AbortController dengan setTimeout untuk menerapkan batas waktu permintaan.

const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), 5000); // 5s timeout

try {
  const data = await fetch(url, { signal: controller.signal });
  // ...
} finally {
  clearTimeout(timeoutId);
}

AbortSignal.timeout() — Pintasan Modern

Dalam browser modern, AbortSignal.timeout(ms) membuat signal yang secara otomatis dibatalkan setelah durasi yang ditentukan tanpa memerlukan controller manual.

const res = await fetch('/api/data', {
  signal: AbortSignal.timeout(5000) // 5 second timeout
});

Pembersihan Sangat Penting dalam React 18 Strict Mode

React 18 Strict Mode memasang efek dua kali dalam pengembangan. Tanpa pembersihan AbortController, Anda akan melihat pengambilan data ganda dan kemungkinan peringatan tentang status pada komponen yang sudah dilepas. Pola pembersihan mencegah keduanya.

Pemeriksaan Singkat

Bagaimana cara mencegah respons jaringan yang usang memperbarui status setelah komponen dirender kembali?

Rangkuman: AbortController

Buat AbortController untuk setiap efek. Teruskan signal ke fetch/axios. Batalkan dalam fungsi pembersihan. Abaikan AbortError — ini merupakan kondisi yang diharapkan. Gunakan signal.aborted sebelum setState dalam kode asinkron. Satu controller dapat membatalkan banyak permintaan. Gunakan AbortSignal.timeout() untuk batas waktu. React Query menangani semua ini secara otomatis.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “AbortController untuk Pembersihan” gratis?

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

Apa yang akan aku pelajari di “AbortController untuk Pembersihan”?

Buat AbortController, teruskan signal-nya ke fetch, dan batalkan permintaan yang sedang berlangsung dalam fungsi pembersihan untuk mencegah pembaruan state pada komponen yang sudah dilepas. Kamu berlatih Frontend 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 Frontend Academy?

Tidak diperlukan pengalaman sebelumnya. Frontend 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 “AbortController untuk Pembersihan” 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 Frontend Academy ini?

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

Dasar useEffect: Dependensi dan Pembersihan
Mengambil Data saat Mount
Menangani State Loading dan Error
AbortController untuk Pembersihan

← Kembali ke Frontend Academy