Rumah >hujung hadapan web >tutorial js >Bagaimanakah Saya Boleh Membatalkan Permintaan `fetch()` Dalam Penerbangan dalam JavaScript?

Bagaimanakah Saya Boleh Membatalkan Permintaan `fetch()` Dalam Penerbangan dalam JavaScript?

Patricia Arquette
Patricia Arquetteasal
2024-11-21 00:35:15807semak imbas

How Can I Cancel an In-Flight `fetch()` Request in JavaScript?

Membatalkan Permintaan pengambilan HTTP Dalam Penerbangan

Kemunculan API fetch() untuk membuat permintaan daripada JavaScript telah menimbulkan persoalan mengenai mekanisme pembatalannya untuk dalam -permintaan penerbangan. Dari segi sejarah, tiada pilihan terbina dalam. Walau bagaimanapun, kemas kini baru-baru ini telah memperkenalkan laluan untuk pembatalan permintaan.

Menggunakan AbortController

Berkuat kuasa 20 September 2017, fetch() kini menyokong parameter isyarat, membolehkan pembatalan permintaan melalui gabungan dengan AbortController. Langkah berikut menggariskan proses:

  1. Buat objek AbortController:

    • const controller = new AbortController()
  2. Dapatkan isyarat AbortController:

    • isyarat const = controller.signal
  3. Lepasi isyarat untuk mengambil():

    • fetch(urlToFetch, { method: 'get', signal: signal })
  4. Batalkan permintaan apabila perlu:

    • controller.abort()

Contoh Penggunaan

Pertimbangkan contoh berikut (serasi dengan Firefox 57 ):

// Create an AbortController instance.
const controller = new AbortController();
const signal = controller.signal;

function beginFetching() {
  console.log('Now fetching');
  fetch("https://httpbin.org/delay/3", {
    method: 'get',
    signal: signal,
  })
  .then(function(response) {
    console.log(`Fetch complete. (Not aborted)`);
  })
  .catch(function(err) {
    console.error(` Err: ${err}`);
  });
}

function abortFetching() {
  console.log('Now aborting');
  // Abort the request.
  controller.abort();
}

Dalam contoh ini, mengklik butang "Mulakan" akan memulakan permintaan, manakala butang "Batalkan" akan menamatkannya sebelum selesai.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membatalkan Permintaan `fetch()` Dalam Penerbangan dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn