0Pricing
JavaScript Academy · บทเรียน

การยกเลิกคำขอด้วย AbortController

ยกเลิกคำขอที่กำลังดำเนินการอยู่อย่างเรียบร้อย

การยกเลิกคำขอด้วย AbortController เป็นบทเรียน JavaScript Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน JavaScript Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 4 บทเรียน

เหตุผลที่ควรยกเลิกคำขอ

บางครั้งคุณเริ่มคำขอที่ไม่จำเป็นอีกต่อไป เช่น ผู้ใช้ออกจากหน้า พิมพ์การค้นหาใหม่ หรือหมดเวลา AbortController ช่วยให้คุณยกเลิกคำขอที่กำลังดำเนินการได้

การสร้างตัวควบคุม

สร้าง AbortController ตัวควบคุมนี้มี signal ที่ส่งต่อให้ฟังก์ชันส่งคำขอได้ และมีเมธอด abort() สำหรับยกเลิก

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

การส่งสัญญาณ

ส่งสัญญาณของตัวควบคุมให้ฟังก์ชันส่งคำขอผ่านวัตถุตัวเลือก จากนั้นคำขอจะสามารถยกเลิกได้

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

การเรียกใช้ abort

เรียกใช้ controller.abort() เพื่อยกเลิก พรอมิสของคำขอที่กำลังรอจะถูกปฏิเสธด้วย AbortError

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

การดักจับ AbortError

แยกการยกเลิกโดยเจตนาออกจากความล้มเหลวจริงได้โดยตรวจสอบ err.name === "AbortError" ใน catch

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

รูปแบบการกำหนดเวลาหมดอายุ

ใช้ร่วมกับ setTimeout เพื่อยกเลิกคำขอที่ช้าโดยอัตโนมัติ หากคำขอเสร็จก่อน ให้ล้างตัวจับเวลา

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

ตัวช่วยกำหนดเวลาหมดอายุในตัว

สภาพแวดล้อมสมัยใหม่มี AbortSignal.timeout(ms) ซึ่งส่งคืนสัญญาณที่ยกเลิกตัวเองโดยอัตโนมัติ วิธีนี้สะอาดกว่าการตั้งตัวจับเวลาเอง

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

ยกเลิกการค้นหาก่อนหน้า

สำหรับการค้นหาขณะพิมพ์ ให้ยกเลิกคำขอก่อนหน้าก่อนเริ่มคำขอใหม่ วิธีนี้ป้องกันไม่ให้การตอบกลับเก่าเขียนทับผลลัพธ์ล่าสุด

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

หนึ่งสัญญาณกับคำขอหลายรายการ

สัญญาณเดียวสามารถยกเลิกคำขอหลายรายการพร้อมกันได้ ส่งสัญญาณเดียวกันให้คำขอหลายรายการ แล้วการเรียกใช้ abort() เพียงครั้งเดียวจะยกเลิกทั้งหมด

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

สัญญาณที่ถูกยกเลิกไปแล้ว

หากสัญญาณถูกยกเลิกอยู่แล้วขณะส่งให้ฟังก์ชันส่งคำขอ คำขอจะถูกปฏิเสธทันที ตรวจสอบ signal.aborted หากต้องการทราบสถานะของสัญญาณ

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

การล้างข้อมูลเมื่อถอดคอมโพเนนต์

ในส่วนติดต่อผู้ใช้ที่สร้างจากคอมโพเนนต์ ให้ยกเลิกคำขอที่ยังค้างอยู่เมื่อคอมโพเนนต์ถูกทำลาย เพื่อหลีกเลี่ยงการตั้งค่าสถานะให้สิ่งที่ไม่มีอยู่อีกต่อไป

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

ตรวจสอบความเข้าใจ

การยกเลิกคำขอ

สรุป

สร้าง AbortController ส่ง signal ของตัวควบคุมให้ฟังก์ชันส่งคำขอ และเรียกใช้ abort() เพื่อยกเลิก พรอมิสจะถูกปฏิเสธด้วย AbortError ซึ่งตรวจจับได้จากชื่อ ใช้รูปแบบนี้สำหรับการกำหนดเวลาหมดอายุ (AbortSignal.timeout) การยกเลิกการค้นหาก่อนหน้า การยกเลิกคำขอหลายรายการ และการล้างข้อมูลเมื่อยุติการทำงาน

คำถามที่พบบ่อย

บทเรียน “การยกเลิกคำขอด้วย AbortController” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การยกเลิกคำขอด้วย AbortController” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส JavaScript Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การยกเลิกคำขอด้วย AbortController”

ยกเลิกคำขอที่กำลังดำเนินการอยู่อย่างเรียบร้อย คุณปฏิบัติ JavaScript Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน JavaScript Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน JavaScript Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน

บทเรียน “การยกเลิกคำขอด้วย AbortController” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน JavaScript Academy นี้ได้ไหม

ได้ บทเรียน JavaScript Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. การส่งคำขอ GET
  2. POST และการส่งข้อมูล
  3. การจัดการข้อผิดพลาดและรหัสสถานะ
  4. การยกเลิกคำขอด้วย AbortController
← กลับไปที่ JavaScript Academy