Frontend Academy · บทเรียน

AbortController สำหรับการทำความสะอาด

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

เหตุใดจึงต้องยกเลิกคำขอ fetch

เมื่อองค์ประกอบถูกยกเลิกการเมานต์หรือดึงข้อมูลใหม่ คำขอก่อนหน้าอาจยังดำเนินการอยู่ หากคำขอนั้นเสร็จสิ้นหลังคำขอใหม่ ข้อมูลเก่าจะเขียนทับข้อมูลล่าสุด AbortController ยกเลิกคำขอที่กำลังดำเนินการอยู่ได้อย่างเรียบร้อย

พื้นฐาน AbortController

สร้าง AbortController ส่ง signal ของมันให้ fetch และเรียก controller.abort() เพื่อยกเลิก Fetch จะส่ง AbortError ออกมาเมื่อถูกยกเลิก

const controller = new AbortController();

try {
  const res = await fetch('/api/data', { signal: controller.signal });
  const data = await res.json();
  setData(data);
} catch (err) {
  if (err instanceof DOMException && err.name === 'AbortError') {
    console.log('Request was cancelled');
  } else {
    setError((err as Error).message);
  }
}

// To cancel:
controller.abort();

ในฟังก์ชันล้างข้อมูลของ useEffect

สร้าง AbortController ที่จุดเริ่มต้นของผลข้างเคียง และเรียก abort() ในฟังก์ชันล้างข้อมูล การทำเช่นนี้จะยกเลิกคำขอโดยอัตโนมัติเมื่อการพึ่งพาเปลี่ยนแปลงหรือองค์ประกอบถูกยกเลิกการเมานต์

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

  async function load() {
    try {
      const res = await fetch(`/api/user/${userId}`, { signal: controller.signal });
      if (!res.ok) throw new Error(`${res.status}`);
      setUser(await res.json());
    } catch (err) {
      if ((err as DOMException).name !== 'AbortError') {
        setError((err as Error).message);
      }
    }
  }

  load();
  return () => controller.abort();
}, [userId]);

AbortError เทียบกับข้อผิดพลาดเครือข่าย

คำขอที่ถูกยกเลิกจะส่ง DOMException ออกมา โดยมีชื่อเป็น 'AbortError' ให้ตรวจสอบกรณีนี้โดยเฉพาะเสมอ และอย่าแสดงเป็นข้อผิดพลาดที่ผู้ใช้เห็น เพราะเป็นพฤติกรรมการล้างข้อมูลที่คาดหมาย

พร็อพเพอร์ตี signal.aborted

ตรวจสอบ controller.signal.aborted เพื่อทดสอบว่าสัญญาณถูกยกเลิกแล้วหรือไม่ มีประโยชน์เมื่อต้องตรวจสอบก่อนเรียก setState ในโค้ดแบบอะซิงโครนัส

const data = await fetchData();
if (!controller.signal.aborted) {
  setData(data); // safe to update state
}

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

AbortController หนึ่งตัวสามารถยกเลิกคำขอ fetch หลายรายการได้ โดยส่งสัญญาณเดียวกันให้กับคำขอทั้งหมด

const controller = new AbortController();
const { signal } = controller;

await Promise.all([
  fetch('/api/users',    { signal }),
  fetch('/api/products', { signal }),
  fetch('/api/settings', { signal }),
]);

controller.abort(); // cancels all three

AbortController กับ Axios

Axios รองรับ signal ของ AbortController ผ่านตัวเลือก signal ในการกำหนดค่า อินเทอร์เฟซของสัญญาณเหมือนกับของ fetch

const controller = new AbortController();
await axios.get('/api/data', { signal: controller.signal });

// In cleanup:
return () => controller.abort();

React Query จัดการเรื่องนี้โดยอัตโนมัติ

เมื่อใช้ TanStack Query (React Query) ระบบจะจัดการการยกเลิกให้ React Query จะสร้างและยกเลิก controller ภายใน นี่เป็นเหตุผลหนึ่งที่ควรเลือกใช้แทนรูปแบบการดึงข้อมูลด้วยตนเอง

การตั้งเวลาหมดอายุด้วย AbortController

ใช้ AbortController ร่วมกับ setTimeout เพื่อกำหนด timeout ให้คำขอ

const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), 5000); // 5s timeout

try {
  const data = await fetch(url, { signal: controller.signal });
  // ...
} finally {
  clearTimeout(timeoutId);
}

AbortSignal.timeout() — ทางลัดสมัยใหม่

ในเบราว์เซอร์สมัยใหม่ AbortSignal.timeout(ms) จะสร้างสัญญาณที่ยกเลิกโดยอัตโนมัติหลังระยะเวลาที่กำหนด โดยไม่ต้องใช้ controller ด้วยตนเอง

const res = await fetch('/api/data', {
  signal: AbortSignal.timeout(5000) // 5 second timeout
});

การล้างข้อมูลสำคัญใน React 18 Strict Mode

React 18 Strict Mode จะเมานต์ผลข้างเคียงสองครั้งในระหว่างการพัฒนา หากไม่มีการล้างข้อมูลด้วย AbortController คุณจะเห็นการดึงข้อมูลซ้ำสองครั้งและอาจได้รับคำเตือนเกี่ยวกับสถานะขององค์ประกอบที่ถูกยกเลิกการเมานต์ รูปแบบการล้างข้อมูลช่วยป้องกันทั้งสองกรณี

ตรวจสอบอย่างรวดเร็ว

คุณจะป้องกันไม่ให้การตอบกลับเครือข่ายที่ค้างอยู่มาอัปเดตสถานะหลังจากองค์ประกอบแสดงผลอีกครั้งได้อย่างไร

สรุป: AbortController

สร้าง AbortController สำหรับผลข้างเคียงแต่ละรายการ ส่ง signal ให้ fetch หรือ Axios ยกเลิกในฟังก์ชันล้างข้อมูล ให้ ignore AbortError เพราะเป็นสิ่งที่คาดหมายไว้ ใช้ signal.aborted ก่อนเรียก setState ในโค้ดแบบอะซิงโครนัส controller หนึ่งตัวสามารถยกเลิกคำขอได้หลายรายการ ใช้ AbortSignal.timeout() สำหรับ timeout และ React Query จะจัดการทั้งหมดนี้โดยอัตโนมัติ

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

บทเรียน “AbortController สำหรับการทำความสะอาด” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “AbortController สำหรับการทำความสะอาด”

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

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

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

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

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

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

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

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

พื้นฐาน useEffect: dependencies และการทำความสะอาด
การดึงข้อมูลเมื่อเมานต์
การจัดการสถานะกำลังโหลดและข้อผิดพลาด
AbortController สำหรับการทำความสะอาด

← กลับไปที่ Frontend Academy