Akademi JavaScript · Pelajaran

Membatalkan Permintaan dengan AbortController

Batalkan permintaan yang sedang berlangsung dengan kemas.

Pelajaran 4 daripada 413 langkah

Membatalkan Permintaan dengan AbortController ialah pelajaran Akademi JavaScript percuma di CoddyKit. Ini ialah pelajaran 4 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Akademi JavaScript, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Akademi JavaScript merangkumi sejumlah 4 pelajaran.

Sebab Membatalkan Permintaan

Kadang-kadang anda memulakan permintaan yang tidak lagi diperlukan: pengguna beralih ke halaman lain, menaip carian baharu atau tempoh timeout tamat. AbortController membolehkan anda membatalkan fetch yang sedang berjalan.

Mencipta Controller

Cipta AbortController. Ia menyediakan signal untuk dihantar kepada fetch serta kaedah abort() untuk membatalkan permintaan.

const controller = new AbortController();
console.log(controller.signal); // an AbortSignal

Menghantar Signal

Berikan signal controller kepada fetch melalui objek pilihan. Kini permintaan itu boleh dibatalkan.

fetch(url, { signal: controller.signal });

Memanggil abort

Panggil controller.abort() untuk membatalkan. Promise fetch yang masih menunggu akan ditolak dengan AbortError.

const controller = new AbortController();
fetch(url, { signal: controller.signal });
controller.abort(); // cancels the request

Menangkap AbortError

Bezakan pembatalan yang disengajakan daripada kegagalan sebenar dengan menyemak err.name === "AbortError" dalam catch anda.

try {
  await fetch(url, { signal: controller.signal });
} catch (err) {
  if (err.name === "AbortError") console.log("Cancelled");
  else throw err;
}

Pola Timeout

Gabungkan dengan setTimeout untuk membatalkan permintaan yang perlahan secara automatik. Kosongkan pemasa jika permintaan selesai terlebih dahulu.

const c = new AbortController();
const t = setTimeout(() => c.abort(), 5000);
await fetch(url, { signal: c.signal });
clearTimeout(t);

Pembantu Timeout Terbina Dalam

Persekitaran moden menyediakan AbortSignal.timeout(ms), yang mengembalikan signal yang membatalkan secara automatik. Kaedah ini lebih kemas daripada memasang setTimeout sendiri.

fetch(url, { signal: AbortSignal.timeout(5000) });

Membatalkan Carian Sebelumnya

Untuk carian semasa menaip, batalkan permintaan sebelumnya sebelum memulakan permintaan baharu. Ini menghalang respons lama daripada menimpa hasil terkini.

let current = null;
function search(q) {
  if (current) current.abort();
  current = new AbortController();
  return fetch("/search?q=" + q, { signal: current.signal });
}

Satu Signal, Banyak Fetch

Satu signal boleh membatalkan beberapa permintaan serentak. Hantar signal yang sama kepada beberapa fetch dan satu abort() akan membatangkan semuanya.

const c = new AbortController();
fetch(a, { signal: c.signal });
fetch(b, { signal: c.signal });
c.abort(); // cancels both

Signal yang Sudah Dibatalkan

Jika signal sudah dibatalkan apabila dihantar kepada fetch, permintaan itu akan ditolak serta-merta. Semak signal.aborted jika anda perlu mengetahui keadaannya.

if (controller.signal.aborted) console.log("already cancelled");

Pembersihan ketika Nyahlekap

Dalam antara muka pengguna berasaskan komponen, batalkan permintaan yang masih belum selesai apabila komponen dimusnahkan untuk mengelakkan keadaan ditetapkan pada sesuatu yang sudah tiada.

const controller = new AbortController();
// on teardown:
controller.abort();

Semakan Pantas

Membatalkan permintaan fetch.

Jawab dalam pelajaran interaktif

Ringkasan

Cipta AbortController, hantar signalnya kepada fetch dan panggil abort() untuk membatalkan. Promise akan ditolak dengan AbortError, yang boleh anda kenal pasti melalui namanya. Gunakannya untuk timeout (AbortSignal.timeout), pembatalan carian sebelumnya, pembatalan berbilang permintaan dan pembersihan semasa peleraian.

Percuma untuk bermula

Pelajari JavaScript dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 59
Pelajaran: 200

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Membatalkan Permintaan dengan AbortController” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Akademi JavaScript, termasuk “Membatalkan Permintaan dengan AbortController”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Akademi JavaScript merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Membatalkan Permintaan dengan AbortController”?

Batalkan permintaan yang sedang berlangsung dengan kemas. Anda berlatih Akademi JavaScript menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Akademi JavaScript?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Akademi JavaScript di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 4 daripada 4.

Berapa lamakah pelajaran “Membatalkan Permintaan dengan AbortController” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Akademi JavaScript ini?

Ya. Setiap pelajaran Akademi JavaScript menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

Membuat Permintaan GET
POST dan Penghantaran Data
Mengendalikan Error dan Kod Status
Membatalkan Permintaan dengan AbortController

← Kembali ke Akademi JavaScript