Angular Academy · บทเรียน

ตัวดำเนินการจัดการข้อผิดพลาด

กู้คืนการทำงานด้วย catchError และ retry

บทเรียน 4 จาก 413 ขั้นตอน

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

ข้อผิดพลาดในออบเซอร์เวเบิล

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

เส้นทางของข้อผิดพลาด

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

this.http.get('/api/data').subscribe({
  next: d => console.log(d),
  error: err => console.error('failed', err)
});

catchError

catchError จะดักจับข้อผิดพลาดและส่งคืน ออบเซอร์เวเบิลทดแทน ทำให้สตรีมทำงานต่อได้อย่างราบรื่น

import { catchError, of } from 'rxjs';

this.http.get('/api/data').pipe(
  catchError(err => {
    console.error(err);
    return of([]); // fallback value
  })
).subscribe(data => console.log(data));

การส่งข้อผิดพลาดซ้ำอย่างเลือกได้

ภายใน catchError คุณสามารถตรวจสอบข้อผิดพลาด แล้วตัดสินใจว่าจะกู้คืนหรือส่งข้อผิดพลาดซ้ำด้วย throwError

import { catchError, throwError, of } from 'rxjs';

source$.pipe(
  catchError(err =>
    err.status === 404 ? of(null) : throwError(() => err)
  )
).subscribe();

retry

retry(n) จะสมัครรับข้อมูลจากแหล่งเดิมใหม่สูงสุด n ครั้งเมื่อเกิดข้อผิดพลาด เหมาะสำหรับความล้มเหลวของเครือข่ายชั่วคราว

import { retry } from 'rxjs';

this.http.get('/api/flaky').pipe(
  retry(2) // try up to 3 times total
).subscribe(d => console.log(d));

retry พร้อมการตั้งค่า

รูปแบบออบเจ็กต์ช่วยเพิ่มระยะหน่วงระหว่างการลองแต่ละครั้ง และรองรับฟังก์ชันเพิ่มระยะหน่วงแบบทวีคูณ เพื่อหลีกเลี่ยงการส่งคำขอถี่เกินไปยังเซิร์ฟเวอร์

this.http.get('/api/flaky').pipe(
  retry({ count: 3, delay: 1000 })
).subscribe(d => console.log(d));

การเพิ่มระยะหน่วงแบบทวีคูณสไตล์ retryWhen

สำหรับการเพิ่มระยะหน่วงแบบทวีคูณ ตัวเลือก delay สามารถเป็นฟังก์ชันที่ส่งคืนออบเซอร์เวเบิลซึ่งหน่วงเวลานานขึ้นเรื่อย ๆ ในแต่ละครั้งที่ลอง

import { timer } from 'rxjs';

source$.pipe(
  retry({
    delay: (err, count) => timer(count * 1000)
  })
).subscribe();

catchError หลัง retry

ใช้ร่วมกันได้ โดยลองใหม่เมื่อเกิดความล้มเหลวชั่วคราว แล้วใช้ทางเลือกสำรองอย่างเหมาะสมเมื่อการลองใหม่ครบจำนวนแล้ว

this.http.get('/api/data').pipe(
  retry({ count: 2, delay: 500 }),
  catchError(() => of([]))
).subscribe(data => console.log(data));

ตำแหน่งมีความสำคัญ

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

term$.pipe(
  switchMap(t => this.http.get('/api?q=' + t).pipe(
    catchError(() => of([])) // outer stream survives
  ))
).subscribe();

EMPTY เป็นทางเลือกสำรองแบบเงียบ

การส่งคืน EMPTY จาก catchError จะทำให้สตรีมเสร็จสิ้นโดยไม่มีค่าใด ๆ เหมาะเมื่อคุณต้องการกลืนข้อผิดพลาดและไม่ส่งค่าออกมา

import { EMPTY, catchError } from 'rxjs';

source$.pipe(
  catchError(() => EMPTY)
).subscribe();

finalize สำหรับการเก็บกวาด

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

import { finalize, catchError, of } from 'rxjs';

this.loading = true;
source$.pipe(
  catchError(() => of([])),
  finalize(() => this.loading = false)
).subscribe();

ตรวจสอบความเข้าใจอย่างรวดเร็ว

ทดสอบความเข้าใจเกี่ยวกับการจัดการข้อผิดพลาด

ตอบคำถามในบทเรียนแบบโต้ตอบ

ทบทวน: ตัวดำเนินการจัดการข้อผิดพลาด

ข้อผิดพลาดจะทำให้สตรีมสิ้นสุด เว้นแต่จะมีการจัดการ

catchError: กู้คืนโดยส่งคืนออบเซอร์เวเบิลทดแทน
retry: สมัครรับข้อมูลใหม่เมื่อเกิดความล้มเหลว โดยอาจกำหนดระยะหน่วงหรือการเพิ่มระยะหน่วงได้
ตำแหน่งที่วาง (ภายใน switchMap หรือท้ายสุด) จะควบคุมขอบเขตการทำงาน

คุณเรียนจบหัวข้อ RxJS Operators in Depth แล้ว

เริ่มต้นได้ฟรี

เรียนรู้ HTML ด้วย AI tutor — ฟรี

เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป

คอร์ส: 38
บทเรียน: 144

เริ่มเรียนฟรี ดูหลักสูตรเต็ม

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

บทเรียน “ตัวดำเนินการจัดการข้อผิดพลาด” ฟรีหรือไม่

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

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

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

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

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

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

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

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

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

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

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