JavaScript AbortController: Menguasai Pola Pembatalan Permintaan

Dalam pengembangan web modern, operasi asinkron adalah hal yang biasa. Baik itu mengambil data dari server jarak jauh, mengunggah file, atau melakukan komputasi kompleks di latar belakang, JavaScript sangat bergantung pada promise dan fungsi asinkron. Namun, operasi asinkron yang tidak terkendali dapat menyebabkan masalah kinerja, pemborosan sumber daya, dan perilaku yang tidak terduga. Di sinilah AbortController sangat berguna. Artikel ini memberikan panduan komprehensif untuk menguasai pola pembatalan permintaan menggunakan AbortController JavaScript, memungkinkan Anda membangun aplikasi web yang lebih tangguh dan efisien untuk audiens global.

Apa itu AbortController?

AbortController adalah API bawaan JavaScript yang memungkinkan Anda untuk membatalkan satu atau lebih permintaan web. Ini menyediakan cara untuk memberi sinyal bahwa suatu operasi harus dibatalkan, mencegah lalu lintas jaringan yang tidak perlu dan konsumsi sumber daya. AbortController bekerja bersama dengan AbortSignal, yang diteruskan ke operasi asinkron yang akan dibatalkan. Bersama-sama, mereka menawarkan mekanisme yang kuat dan fleksibel untuk mengelola tugas-tugas asinkron.

Mengapa Menggunakan AbortController?

Beberapa skenario mendapat manfaat dari penggunaan AbortController:

• Peningkatan Kinerja: Membatalkan permintaan yang sedang berjalan yang tidak lagi diperlukan mengurangi lalu lintas jaringan dan membebaskan sumber daya, menghasilkan aplikasi yang lebih cepat dan lebih responsif.
• Mencegah Kondisi Balapan (Race Conditions): Ketika beberapa permintaan dimulai secara berurutan dengan cepat, hanya hasil dari permintaan terbaru yang mungkin relevan. Membatalkan permintaan sebelumnya mencegah kondisi balapan dan memastikan konsistensi data.
• Meningkatkan Pengalaman Pengguna: Dalam skenario seperti pencarian saat mengetik (search as you type) atau pemuatan konten dinamis, membatalkan permintaan yang sudah usang memberikan pengalaman pengguna yang lebih lancar dan responsif.
• Manajemen Sumber Daya: Perangkat seluler dan lingkungan dengan sumber daya terbatas mendapat manfaat dari pembatalan permintaan yang berjalan lama atau tidak perlu untuk menghemat masa pakai baterai dan lebar pita (bandwidth).

Penggunaan Dasar

Berikut adalah contoh dasar yang menunjukkan cara menggunakan AbortController dengan fetch API:

Contoh 1: Pembatalan Fetch Sederhana

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

fetch('https://api.example.com/data', { signal })
 .then(response => {
  if (!response.ok) {
    throw new Error(`HTTP error! status: ${response.status}`);
  }
  return response.json();
 })
 .then(data => {
  console.log(data);
 })
 .catch(error => {
  if (error.name === 'AbortError') {
   console.log('Fetch aborted');
  } else {
   console.error('Fetch error:', error);
  }
 });

// Batalkan permintaan fetch setelah 5 detik
setTimeout(() => {
 controller.abort();
}, 5000);

            

              
                Copy
              
            
          

Penjelasan:

• Sebuah AbortController baru dibuat.
• Properti signal dari AbortController diteruskan ke opsi fetch.
• Sebuah fungsi setTimeout digunakan untuk membatalkan permintaan setelah 5 detik dengan memanggil controller.abort().
• Blok catch menangani AbortError, yang dilemparkan ketika permintaan dibatalkan.

Pola Pembatalan Lanjutan

Selain contoh dasar, beberapa pola lanjutan dapat digunakan untuk memanfaatkan AbortController secara efektif.

Pola 1: Pembatalan saat Komponen Unmount (Contoh React)

Dalam kerangka kerja berbasis komponen seperti React, adalah umum untuk memulai permintaan saat komponen di-mount dan membatalkannya saat komponen di-unmount. Ini mencegah kebocoran memori dan memastikan bahwa aplikasi tidak terus memproses data untuk komponen yang tidak lagi terlihat.

            import React, { useState, useEffect } from 'react';

function DataComponent() {
 const [data, setData] = useState(null);
 const [loading, setLoading] = useState(true);
 const [error, setError] = useState(null);

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

  const fetchData = async () => {
   try {
    const response = await fetch('https://api.example.com/data', { signal });
    if (!response.ok) {
     throw new Error(`HTTP error! status: ${response.status}`);
    }
    const json = await response.json();
    setData(json);
   } catch (error) {
    if (error.name === 'AbortError') {
     console.log('Fetch aborted');
    } else {
     setError(error);
    }
   } finally {
    setLoading(false);
   }
  };

  fetchData();

  return () => {
   controller.abort(); // Fungsi pembersihan untuk membatalkan permintaan
  };
 }, []); // Array dependensi kosong memastikan ini hanya berjalan saat mount/unmount

 if (loading) return 
Loading...
;
 if (error) return 
Error: {error.message}
;

 return (
  

   
Data:
   
{JSON.stringify(data, null, 2)}
  
 );
}

export default DataComponent;

            

              
                Copy
              
            
          

Penjelasan:

• Hook useEffect digunakan untuk melakukan efek samping (dalam hal ini, mengambil data) saat komponen di-mount.
• AbortController dibuat di dalam hook useEffect.
• Fungsi pembersihan yang dikembalikan oleh useEffect memanggil controller.abort() saat komponen di-unmount, memastikan bahwa setiap permintaan yang sedang berlangsung dibatalkan.
• Array dependensi kosong ([]) diteruskan ke useEffect, menunjukkan bahwa efek hanya boleh berjalan sekali saat mount dan sekali saat unmount.

Pola 2: Debouncing dan Throttling

Debouncing dan throttling adalah teknik yang digunakan untuk membatasi laju eksekusi suatu fungsi. Teknik ini umum digunakan dalam skenario seperti pencarian saat mengetik atau mengubah ukuran jendela, di mana peristiwa yang sering terjadi dapat memicu operasi yang mahal. AbortController dapat digunakan bersama dengan debouncing dan throttling untuk membatalkan permintaan sebelumnya ketika peristiwa baru terjadi.

Contoh: Pencarian dengan Debounce menggunakan AbortController

            function debouncedSearch(query, delay = 300) {
 let controller = null; // Simpan controller dalam lingkup
 return function() {
    if (controller) {
      controller.abort(); // Batalkan permintaan sebelumnya
    }

    controller = new AbortController(); // Buat AbortController baru
    const signal = controller.signal;
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        fetch(`https://api.example.com/search?q=${query}`, { signal })
          .then(response => {
            if (!response.ok) {
              throw new Error(`HTTP error! status: ${response.status}`);
            }
            return response.json(); 
          })
          .then(data => {
            resolve(data);
          })
          .catch(error => {
              if (error.name === 'AbortError') {
                console.log('Search Aborted for: ' + query);
              } else {
                reject(error);
              }
          });
      }, delay);
    });
  };
}

// Contoh Penggunaan:
const search = debouncedSearch('Example Query');
search().then(results => console.log(results)).catch(error => console.error(error)); //Pencarian awal
search().then(results => console.log(results)).catch(error => console.error(error)); //Pencarian lain; membatalkan yang sebelumnya
search().then(results => console.log(results)).catch(error => console.error(error)); //...dan yang lainnya

            

              
                Copy
              
            
          

Penjelasan:

• Fungsi debouncedSearch mengembalikan versi debounced dari fungsi pencarian.
• Setiap kali fungsi debounced dipanggil, fungsi ini pertama-tama membatalkan permintaan sebelumnya menggunakan controller.abort().
• Sebuah AbortController baru kemudian dibuat dan digunakan untuk memulai permintaan baru.
• Fungsi setTimeout memperkenalkan penundaan sebelum permintaan dibuat, memastikan bahwa pencarian hanya dilakukan setelah pengguna berhenti mengetik selama periode waktu tertentu.

Pola 3: Menggabungkan Beberapa AbortSignal

Dalam beberapa kasus, Anda mungkin perlu membatalkan permintaan berdasarkan beberapa kondisi. Misalnya, Anda mungkin ingin membatalkan permintaan jika terjadi batas waktu (timeout) atau jika pengguna meninggalkan halaman. Anda dapat mencapai ini dengan menggabungkan beberapa instance AbortSignal menjadi satu sinyal tunggal.

Pola ini tidak didukung secara native, dan Anda biasanya perlu mengimplementasikan logika penggabungan Anda sendiri.

Pola 4: Batas Waktu dan Tenggat Waktu

Menetapkan batas waktu untuk permintaan sangat penting untuk mencegahnya menggantung tanpa batas. AbortController dapat digunakan untuk mengimplementasikan batas waktu dengan mudah.

            async function fetchDataWithTimeout(url, timeout) {
 const controller = new AbortController();
 const signal = controller.signal;

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

 try {
  const response = await fetch(url, { signal });
  clearTimeout(timeoutId); // Hapus timeout jika permintaan selesai dengan sukses

  if (!response.ok) {
   throw new Error(`HTTP error! status: ${response.status}`);
  }
  return await response.json();
 } catch (error) {
  clearTimeout(timeoutId); // Hapus timeout jika terjadi galat
  throw error;
 }
}

// Penggunaan:
fetchDataWithTimeout('https://api.example.com/data', 3000) // batas waktu 3 detik
 .then(data => console.log(data))
 .catch(error => console.error(error));

            

              
                Copy
              
            
          

Penjelasan:

• Fungsi fetchDataWithTimeout menerima URL dan nilai batas waktu sebagai argumen.
• Sebuah fungsi setTimeout digunakan untuk membatalkan permintaan setelah batas waktu yang ditentukan.
• Fungsi clearTimeout dipanggil di blok try dan catch untuk memastikan bahwa batas waktu dihapus jika permintaan selesai dengan sukses atau jika terjadi galat.

Pertimbangan Global dan Praktik Terbaik

Saat bekerja dengan AbortController dalam konteks global, penting untuk mempertimbangkan hal-hal berikut:

• Lokalisasi: Pesan galat dan elemen antarmuka pengguna yang terkait dengan pembatalan permintaan harus dilokalkan untuk memastikan dapat diakses oleh pengguna di berbagai wilayah.
• Kondisi Jaringan: Kondisi jaringan dapat sangat bervariasi di berbagai lokasi geografis. Sesuaikan nilai batas waktu dan strategi pembatalan berdasarkan latensi dan lebar pita jaringan yang diharapkan di berbagai wilayah.
• Pertimbangan Sisi Server: Pastikan bahwa titik akhir API sisi server Anda menangani permintaan yang dibatalkan dengan baik. Misalnya, Anda mungkin ingin mengimplementasikan mekanisme untuk berhenti memproses permintaan jika klien telah membatalkannya.
• Aksesibilitas: Berikan umpan balik yang jelas dan informatif kepada pengguna saat permintaan dibatalkan. Ini dapat membantu pengguna memahami mengapa permintaan dibatalkan dan mengambil tindakan yang sesuai.
• Seluler vs. Desktop: Pengguna seluler mungkin memiliki koneksi yang lebih tidak stabil, pastikan batas waktu dan penanganan galat Anda tangguh untuk perangkat seluler.
• Browser yang Berbeda: Pertimbangkan untuk melakukan pengujian di berbagai browser dan versi untuk memeriksa masalah kompatibilitas terkait API AbortController.

Penanganan Galat

Penanganan galat yang tepat sangat penting saat menggunakan AbortController. Selalu periksa AbortError dan tangani dengan semestinya.

            try {
 // ... kode fetch ...
} catch (error) {
 if (error.name === 'AbortError') {
  console.log('Permintaan dibatalkan');
  // Lakukan pembersihan atau pembaruan UI yang diperlukan
 } else {
  console.error('Terjadi galat:', error);
  // Tangani galat lainnya
 }
}

            

              
                Copy
              
            
          

Kesimpulan

JavaScript AbortController adalah alat yang ampuh untuk mengelola operasi asinkron dan meningkatkan kinerja serta responsivitas aplikasi web. Dengan memahami penggunaan dasar dan pola-pola lanjutan, Anda dapat membangun aplikasi yang lebih tangguh dan efisien yang memberikan pengalaman pengguna yang lebih baik untuk audiens global. Ingatlah untuk mempertimbangkan lokalisasi, kondisi jaringan, dan pertimbangan sisi server saat mengimplementasikan pembatalan permintaan di aplikasi Anda.

Dengan memanfaatkan pola-pola yang diuraikan di atas, para pengembang dapat dengan percaya diri mengelola operasi asinkron, mengoptimalkan penggunaan sumber daya, dan memberikan pengalaman pengguna yang luar biasa di berbagai lingkungan dan audiens global.

Panduan komprehensif ini seharusnya memberikan dasar yang kuat untuk menguasai pola pembatalan permintaan menggunakan AbortController JavaScript. Selamat membuat kode!