Abort Controller di JavaScript: Panduan, Kasus Penggunaan, dan Best Practices

Dalam dunia pemrograman JavaScript, kita sering kali menghadapi situasi di mana operasi perlu dihentikan di tengah jalan. Kadang, pengguna tiba-tiba mengganti halaman, jaringan terputus di tengah-tengah, atau mungkin kita menyadari ada sesuatu yang lebih penting untuk dilakukan. Siapa pun alasannya, situasi ini sering kali bisa membuat kita frustrasi jika tidak ditangani dengan benar.

Untungnya, JavaScript menawarkan solusi keren bernama Abort Controller. Fitur ini memungkinkan kita untuk menghentikan operasi asinkron kapan pun kita mau, seperti superhero yang muncul di saat genting. Dengan kemampuan ini, kita bisa memastikan aplikasi kita tetap efisien, hemat sumber daya, dan memberikan pengalaman terbaik untuk pengguna.

Apa Itu Abort Controller?

Secara sederhana, Abort Controller adalah fitur bawaan JavaScript yang memungkinkan kita untuk membatalkan (abort) operasi asinkron, seperti permintaan fetch atau tugas-tugas lainnya yang mendukung sinyal pembatalan. Dengan kata lain, kita mendapatkan tombol "Stop" di dunia asinkron JavaScript.

Bagaimana Cara Kerjanya?

Abort Controller bekerja dengan dua elemen inti:

1. AbortController: Ini adalah objek utama yang kita buat untuk mengatur pembatalan.
2. AbortSignal: Ini adalah properti dari AbortController yang dikaitkan dengan tugas asinkron kita. Jika sinyal ini diaktifkan ("aborted"), tugas akan dibatalkan.

Analoginya

Bayangkan Anda memesan pizza melalui aplikasi. Ketika kurir sedang dalam perjalanan, tiba-tiba Anda sadar kalau Anda sudah pesan makan malam dengan teman. Anda menelepon restoran dan berkata, "Tolong batalkan pesanannya!" Restoran, yang bertindak sebagai AbortController, mengirimkan sinyal pembatalan ke kurir (AbortSignal), sehingga pizza tak pernah sampai.

Mengapa Abort Controller Penting?

Abort Controller adalah jawaban untuk berbagai skenario praktis yang sering kita temui, seperti:

• Membatalkan fetch ketika pengguna berpindah halaman: Anda tidak ingin membuang sumber daya untuk sesuatu yang tidak lagi relevan.
• Timeout otomatis: Ketika operasi memakan waktu terlalu lama, kita ingin membatalkannya.
• Pengendalian resource-intensive task: Kadang-kadang tugas-tugas berat perlu dihentikan sebelum merusak performa aplikasi.

Studi Kasus: Contoh Implementasi

Mari kita lihat beberapa contoh nyata bagaimana Abort Controller bisa digunakan.

Kasus 1: Membatalkan Fetch Request

Misalkan kita sedang membuat aplikasi berita. Saat pengguna mengetikkan kata kunci pencarian, kita melakukan fetch ke API berita. Namun, jika pengguna mengetikkan kata baru sebelum fetch selesai, kita ingin membatalkan permintaan sebelumnya.

const controller = new AbortController();
const signal = controller.signal;

async function fetchNews(query: string) {
  try {
    const response = await fetch(`https://api.berita.com/search?q=${query}`, { signal });
    const data = await response.json();
    console.log(data);
  } catch (error) {
    if (error.name === 'AbortError') {
      console.log('Request dibatalkan');
    } else {
      console.error('Error lainnya:', error);
    }
  }
}

// Memulai fetch
fetchNews('javascript');

// Membatalkan fetch setelah 2 detik
setTimeout(() => controller.abort(), 2000);

Penjelasan

1. Kita membuat AbortController dan mendapatkan sinyalnya.
2. Sinyal itu diteruskan ke opsi fetch.
3. Jika controller.abort() dipanggil, fetch akan dibatalkan, dan kita mendapatkan error dengan nama 'AbortError'.

Kasus 2: Timeout Otomatis

Bayangkan kita sedang membuat aplikasi cuaca. Jika API cuaca tidak merespons dalam waktu 5 detik, kita ingin menghentikan permintaan.

function fetchWithTimeout(url: string, timeout: number) {
  const controller = new AbortController();
  const signal = controller.signal;

  const timeoutId = setTimeout(() => controller.abort(), timeout);

  return fetch(url, { signal })
    .then(response => {
      clearTimeout(timeoutId);
      return response.json();
    })
    .catch(error => {
      if (error.name === 'AbortError') {
        console.log('Request dibatalkan karena timeout.');
      } else {
        console.error('Error lainnya:', error);
      }
    });
}

fetchWithTimeout('https://api.cuaca.com/today', 5000);

Penjelasan

1. Timeout mengatur batas waktu maksimum untuk fetch.
2. Jika waktu habis, controller.abort() dipanggil, dan fetch dibatalkan.
3. Operasi timeout dibersihkan menggunakan clearTimeout jika fetch selesai tepat waktu.

Kasus 3: Membatalkan Animasi Berat dengan Web Workers

AbortController juga bisa digunakan untuk menghentikan tugas berat yang dijalankan di Web Workers. Contoh, kita menjalankan animasi perhitungan berat yang memakan waktu lama, dan pengguna memutuskan untuk membatalkannya

const controller = new AbortController();
const signal = controller.signal;

function startHeavyAnimation() {
  if (typeof Worker !== 'undefined') {
    const worker = new Worker('heavy-animation-worker.js');

    signal.addEventListener('abort', () => {
      worker.terminate();
      console.log('Animasi dibatalkan.');
    });

    worker.postMessage({ task: 'startAnimation' });
  } else {
    console.error('Web Workers tidak didukung di browser ini.');
  }
}

// Memulai animasi
startHeavyAnimation();

// Membatalkan animasi setelah 3 detik
setTimeout(() => controller.abort(), 3000);

Penjelasan

1. Web Workers digunakan untuk menjalankan tugas berat di thread terpisah.
2. AbortSignal dipakai untuk mendengarkan ketika abort dipanggil, sehingga kita bisa menghentikan animasi dengan worker.terminate().
3. Pendekatan ini menjaga agar UI tetap responsif meskipun ada tugas berat berjalan di latar belakang.

Best Practices dalam Menggunakan Abort Controller

1. Selalu Tangani AbortError

   AbortError adalah bagian tak terpisahkan dari Abort Controller. Pastikan Anda selalu menangani error ini dengan tepat.

   try {
     // kode fetch
   } catch (error) {
     if (error.name === 'AbortError') {
       console.log('Operasi dibatalkan oleh AbortController.');
     } else {
       console.error('Error lainnya:', error);
     }
   }

2. Gunakan Satu AbortController per Tugas

   Setiap tugas asinkron harus memiliki AbortController sendiri. Jangan mencoba menggunakan satu controller untuk beberapa tugas. Berikut adalah contoh kode untuk menunjukkan masalah jika kita mencoba menggunakan satu AbortController:

   const controller = new AbortController();
   const signal = controller.signal;
   
   async function taskA() {
     try {
       await fetch('https://api.example.com/taskA', { signal });
       console.log('Task A selesai');
     } catch (error) {
       if (error.name === 'AbortError') {
         console.log('Task A dibatalkan');
       }
     }
   }
   
   async function taskB() {
     try {
       await fetch('https://api.example.com/taskB', { signal });
       console.log('Task B selesai');
     } catch (error) {
       if (error.name === 'AbortError') {
         console.log('Task B dibatalkan');
       }
     }
   }
   
   // Memulai kedua tugas
   taskA();
   taskB();
   
   // Membatalkan semua tugas setelah 2 detik
   setTimeout(() => controller.abort(), 2000);

   Pada contoh ini, jika kita menggunakan satu AbortController untuk kedua tugas, pemanggilan controller.abort() akan membatalkan semua tugas yang menggunakan sinyal yang sama. Ini mungkin bukan yang kita inginkan jika hanya salah satu tugas yang perlu dibatalkan. Oleh karena itu, penting untuk membuat AbortController terpisah untuk setiap tugas asinkron.

3. Bersihkan Resource

   Pastikan timeout atau resource lain yang terkait dengan AbortController dibersihkan setelah selesai digunakan. Berikut adalah contoh kode yang menunjukkan cara membersihkan timeout dengan menggunakan AbortController:

   function fetchWithCleanup(url: string, timeout: number) {
     const controller = new AbortController();
     const signal = controller.signal;
   
     const timeoutId = setTimeout(() => controller.abort(), timeout);
   
     return fetch(url, { signal })
       .then(response => {
         clearTimeout(timeoutId); // Membersihkan timeout setelah fetch selesai
         return response.json();
       })
       .catch(error => {
         clearTimeout(timeoutId); // Pastikan timeout juga dibersihkan jika ada error
         if (error.name === 'AbortError') {
           console.log('Request dibatalkan.');
         } else {
           console.error('Error lainnya:', error);
         }
       });
   }
   
   fetchWithCleanup('https://api.example.com/data', 5000);

   Kode ini menunjukkan bagaimana kita bisa memastikan bahwa sumber daya seperti timeout dibersihkan dengan benar, baik saat operasi selesai dengan sukses maupun saat terjadi error.

Kesimpulan

Abort Controller adalah alat yang luar biasa untuk membatalkan operasi asinkron di JavaScript. Dengan kemampuannya, kita dapat mencegah aplikasi kita melakukan tugas-tugas yang tidak lagi relevan, sehingga sumber daya dapat digunakan secara lebih efisien. Tidak hanya itu, Abort Controller membantu kita menciptakan pengalaman pengguna yang lebih baik, misalnya dengan menghentikan operasi yang sudah tidak diperlukan saat pengguna berpindah halaman atau mengganti tindakan.

Namun, seperti semua alat yang kuat, penggunaan Abort Controller membutuhkan tanggung jawab. Pengembang perlu memahami kapan dan bagaimana menggunakan fitur ini dengan benar agar tidak menimbulkan efek samping yang tidak diinginkan. Ingatlah, fitur ini bukan hanya soal "membatalkan", tetapi juga soal memastikan aplikasi tetap berjalan dengan optimal, tanpa membuang-buang sumber daya atau mempersulit debugging. Dengan begitu, Abort Controller bisa menjadi senjata rahasia Anda untuk membangun aplikasi yang lebih cepat dan responsif.