การจัดการข้อผิดพลาดในคำขอ HTTP ของ Angular

เรียนรู้วิธีจัดการข้อผิดพลาด HTTP ในแอปพลิเคชัน Angular ของคุณอย่างเหมาะสม

เหตุใดจึงต้องจัดการข้อผิดพลาด

การจัดการข้อผิดพลาดมีความสำคัญอย่างยิ่งต่อการจัดการปัญหาที่อาจเกิดขึ้นระหว่างการสื่อสารผ่าน HTTP เช่น ข้อผิดพลาดของเครือข่ายหรือปัญหาจากเซิร์ฟเวอร์

การดักจับข้อผิดพลาด HTTP

ใช้ตัวดำเนินการ catchError จาก RxJS เพื่อจัดการข้อผิดพลาดของคำขอ HTTP:

this.http.get('api/data').pipe(
  catchError(this.handleError)
).subscribe();

ตัวดำเนินการ catchError

ใช้ catchError เพื่อดักจับข้อผิดพลาด HTTP:

catchError(error => of(`Error: ${error.status}`));

ฟังก์ชันจัดการข้อผิดพลาด

สร้างฟังก์ชันที่นำกลับมาใช้ซ้ำได้เพื่อจัดการข้อผิดพลาดทั่วทั้งระบบ:

private handleError(error: HttpErrorResponse) {
  return throwError(() => new Error('Something went wrong'));
}

ประเภทของข้อผิดพลาด

• ข้อผิดพลาดฝั่งไคลเอ็นต์ (ปัญหาเครือข่าย)
• ข้อผิดพลาดฝั่งเซิร์ฟเวอร์ (ข้อผิดพลาดของการตอบกลับ)

แนวทางปฏิบัติที่ดีในการจัดการข้อผิดพลาด

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

การลองส่งคำขอใหม่

ลองส่งคำขอ HTTP ที่ล้มเหลวใหม่โดยอัตโนมัติโดยใช้ตัวดำเนินการ retry():

this.http.get('api/data').pipe(retry(3)).subscribe();

สรุป

คุณเรียนรู้การจัดการข้อผิดพลาดด้วยไคลเอ็นต์ HTTP ของ Angular ได้อย่างมีประสิทธิภาพแล้ว ทำได้ดีมากครับ/ค่ะ!