Adakah Anda Benar-benar Tahu AbortController?

Ramai pembangun mungkin menganggap mereka memahami AbortController, tetapi keupayaannya jauh melebihi asas. Daripada membatalkan permintaan pengambilan kepada mengurus pendengar acara dan cangkuk React.

Adakah anda benar-benar tahu betapa hebatnya AbortController? Jom tengok:

Membatalkan Permintaan pengambilan dengan AbortController

Menggunakan AbortController dengan fetch, sudah tentu, adalah penggunaan yang paling biasa.

Berikut ialah contoh yang menunjukkan cara AbortController boleh digunakan untuk membuat permintaan pengambilan boleh dibatalkan:

fetchButton.onclick = async () => {
  const controller = new AbortController();
  // Add a cancel button
  abortButton.onclick = () => controller.abort();
  try {
    const response = await fetch('/json', { signal: controller.signal });
    const data = await response.json();
    // Perform business logic here
  } catch (error) {
    const isUserAbort = error.name === 'AbortError';
    // AbortError is thrown when the request is canceled using AbortController
  }
};

Contoh di atas mempamerkan sesuatu yang mustahil sebelum pengenalan AbortController: keupayaan untuk membatalkan permintaan rangkaian secara pengaturcaraan. Apabila dibatalkan, penyemak imbas menghentikan pengambilan, menjimatkan lebar jalur rangkaian. Yang penting, pembatalan tidak perlu dimulakan oleh pengguna.

Isyarat pengawal menyediakan objek AbortSignal, membolehkan komunikasi dengan operasi tak segerak seperti mengambil dan membenarkannya dibatalkan.

Untuk menggabungkan berbilang isyarat menjadi satu isyarat, anda boleh menggunakan AbortSignal.any(). Begini caranya:

try {
  const controller = new AbortController();
  const timeoutSignal = AbortSignal.timeout(5000);
  const response = await fetch(url, {
    // Abort fetch if any of the signals are triggered
    signal: AbortSignal.any([controller.signal, timeoutSignal]),
  });
  const data = await response.json();
} catch (error) {
  if (error.name === 'AbortError') {
    // Notify the user of cancellation
  } else if (error.name === 'TimeoutError') {
    // Notify the user of timeout
  } else {
    // Handle other errors, like network issues
    console.error(`Type: ${error.name}, Message: ${error.message}`);
  }
}

Perbezaan Antara AbortController dan AbortSignal

• AbortController: Digunakan untuk membatalkan isyarat berkaitan secara jelas melalui controller.abort().
• AbortSignal: Mewakili objek isyarat; ia tidak boleh secara langsung membatalkan apa-apa tetapi menyampaikan keadaannya yang digugurkan.

Untuk AbortSignal, Anda boleh:

• Semak sama ada ia digugurkan menggunakan isyarat.digugurkan.
• Dengar acara pengguguran:

if (signal.aborted) {
}
signal.addEventListener('abort', () => {});

Apabila permintaan dibatalkan menggunakan AbortController, pelayan tidak akan memprosesnya atau menghantar respons, menjimatkan lebar jalur dan meningkatkan prestasi pihak pelanggan dengan mengurangkan sambungan serentak.

Kes Penggunaan Biasa untuk AbortController

Membatalkan Sambungan WebSocket

API lama seperti WebSocket tidak menyokong AbortSignal secara asli. Sebaliknya, anda boleh melaksanakan pembatalan seperti ini:

function abortableSocket(url, signal) {
  const socket = new WebSocket(url);
  if (signal.aborted) {
    socket.close();
    // Abort immediately if already canceled
  }
  signal.addEventListener('abort', () => socket.close());
  return socket;
}

Nota: Jika AbortSignal sudah digugurkan, ia tidak akan mencetuskan acara pengguguran, jadi anda perlu menyemak dan mengendalikan kes ini terlebih dahulu.

Mengalih keluar Pendengar Acara

Secara tradisinya, mengalih keluar pendengar acara memerlukan rujukan fungsi yang sama:

window.addEventListener('resize', () => doSomething());
window.removeEventListener('resize', () => doSomething()); // This won’t work

Dengan AbortController, ini menjadi lebih mudah:

const controller = new AbortController();
const { signal } = controller;
window.addEventListener('resize', () => doSomething(), { signal });
// Remove the event listener by calling abort()
controller.abort();

Untuk pelayar lama, pertimbangkan untuk menambah poliisi untuk menyokong AbortController.

Menguruskan Tugas Asynchronous dalam React Hooks

Dalam React, kesan boleh berjalan selari secara tidak sengaja jika komponen mengemas kini sebelum tugas tak segerak sebelum ini selesai:

function FooComponent({ something }) {
  useEffect(async () => {
    const data = await fetch(url + something);
    // Handle the data
  }, [something]);
  return ...>;
}

Untuk mengelakkan isu sedemikian, gunakan AbortController untuk membatalkan tugas sebelumnya:

fetchButton.onclick = async () => {
  const controller = new AbortController();
  // Add a cancel button
  abortButton.onclick = () => controller.abort();
  try {
    const response = await fetch('/json', { signal: controller.signal });
    const data = await response.json();
    // Perform business logic here
  } catch (error) {
    const isUserAbort = error.name === 'AbortError';
    // AbortError is thrown when the request is canceled using AbortController
  }
};

Menggunakan AbortController dalam Node.js

Node.js Moden termasuk pelaksanaan setTimeout yang serasi dengan AbortController:

try {
  const controller = new AbortController();
  const timeoutSignal = AbortSignal.timeout(5000);
  const response = await fetch(url, {
    // Abort fetch if any of the signals are triggered
    signal: AbortSignal.any([controller.signal, timeoutSignal]),
  });
  const data = await response.json();
} catch (error) {
  if (error.name === 'AbortError') {
    // Notify the user of cancellation
  } else if (error.name === 'TimeoutError') {
    // Notify the user of timeout
  } else {
    // Handle other errors, like network issues
    console.error(`Type: ${error.name}, Message: ${error.message}`);
  }
}

Tidak seperti setTimeout penyemak imbas, pelaksanaan ini tidak menerima panggilan balik; sebaliknya, gunakan .then() atau tunggu.

TaskController untuk Penjadualan Lanjutan

Penyemak imbas bergerak ke arah scheduler.postTask() untuk keutamaan tugas, dengan TaskController melanjutkan AbortController. Anda boleh menggunakannya untuk membatalkan tugasan dan melaraskan keutamaannya secara dinamik:

if (signal.aborted) {
}
signal.addEventListener('abort', () => {});

Jika kawalan keutamaan tidak diperlukan, anda boleh menggunakan AbortController sahaja.

Kesimpulan

AbortController ialah alat penting dalam pembangunan JavaScript moden, menawarkan cara piawai untuk mengurus dan membatalkan tugas tak segerak.

Penyepaduannya ke dalam kedua-dua pelayar dan persekitaran Node.js menyerlahkan kepelbagaian dan kepentingannya.

Jika anda tidak tahu AbortController, kini tiba masanya untuk menerima keupayaan penuhnya dan menjadikannya sebagai asas kepada kit alat pengaturcaraan tak segerak anda.

---

Kami ialah Adakah Anda Benar-benar Tahu AbortController?, pilihan utama anda untuk menggunakan projek Node.js ke awan.

Adakah Anda Benar-benar Tahu AbortController? ialah Platform Tanpa Pelayan Generasi Seterusnya untuk Pengehosan Web, Tugas Async dan Redis:

Sokongan Berbilang Bahasa

• Bangun dengan Node.js, Python, Go atau Rust.

Kerahkan projek tanpa had secara percuma

• bayar hanya untuk penggunaan — tiada permintaan, tiada caj.

Kecekapan Kos yang tiada tandingan

• Bayar semasa anda pergi tanpa caj terbiar.
• Contoh: $25 menyokong 6.94 juta permintaan pada purata masa tindak balas 60ms.

Pengalaman Pembangun Diperkemas

• UI intuitif untuk persediaan yang mudah.
• Saluran paip CI/CD automatik sepenuhnya dan penyepaduan GitOps.
• Metrik masa nyata dan pengelogan untuk mendapatkan cerapan yang boleh diambil tindakan.

Skala Mudah dan Prestasi Tinggi

• Penskalaan automatik untuk mengendalikan konkurensi tinggi dengan mudah.
• Sifar operasi overhed — hanya fokus pada pembinaan.

Terokai lagi dalam Dokumentasi!

Ikuti kami di X: @Adakah Anda Benar-benar Tahu AbortController?HQ

---

Baca di blog kami

Atas ialah kandungan terperinci Adakah Anda Benar-benar Tahu AbortController?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!