Membatalkan Fetch dengan AbortController

Kadang kita memulai sebuah fetch, tapi hasilnya sudah tidak kita butuhkan lagi. Pengguna pindah halaman, atau mengetik kata kunci baru sebelum pencarian yang lama selesai. Membiarkan request lama tetap jalan cuma buang-buang jaringan, dan hasilnya yang datang belakangan malah bisa menimpa hasil yang benar.

AbortController memberi kita cara untuk membatalkan request di tengah jalan. Kita buat satu controller, lalu berikan signal-nya ke fetch:

const controller = new AbortController();

fetch('/api/cari?q=react', { signal: controller.signal })
  .then((res) => res.json())
  .then((data) => console.log(data))
  .catch((err) => {
    if (err.name === 'AbortError') return; // sengaja dibatalkan, abaikan
    throw err;
  });

// batalkan kapan pun kita mau
controller.abort();

Ketika abort() dipanggil, promise dari fetch bakal ditolak dengan error bernama AbortError. Itu kenapa di catch kita perlu membedakannya dari error sungguhan, karena pembatalan yang kita lakukan sendiri bukanlah sebuah kegagalan.

Pola ini pas banget untuk live search. Setiap kali pengguna mengetik, batalkan request sebelumnya lalu mulai yang baru, sehingga yang tersisa cuma hasil dari kata kunci paling akhir. Di React, kamu bisa menaruh controller.abort() di dalam fungsi cleanup milik useEffect.