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

การลองใหม่และตัวบ่งชี้การโหลด

สร้างการลองใหม่และตัวหมุนแสดงการโหลดทั่วทั้งแอป

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

ข้อกังวลร่วมกันสองประการ

อินเตอร์เซปเตอร์เหมาะอย่างยิ่งสำหรับพฤติกรรมของแอปที่ใช้ทั่วทั้งระบบสองอย่าง ได้แก่ การลองส่งคำขอที่ล้มเหลวใหม่โดยอัตโนมัติ และการติดตามสถานะการโหลดส่วนกลางขณะที่มีคำขอใด ๆ กำลังดำเนินการ

การลองใหม่ด้วย retry

ส่ง retry ต่อจาก next(req) เพื่อพยายามส่งคำขอใหม่เมื่อเกิดความล้มเหลวชั่วคราว

import { retry } from 'rxjs';

export const retryInterceptor: HttpInterceptorFn = (req, next) =>
  next(req).pipe(retry(2));

ลองใหม่เฉพาะคำขอที่ปลอดภัย

ลองใหม่กับเมธอดที่ทำซ้ำได้อย่างปลอดภัย (GET, HEAD) ได้โดยทั่วไป แต่ควรระวังการลองใหม่กับ POST/PUT ซึ่งอาจทำให้เกิดข้อมูลซ้ำ ให้ตรวจสอบตามเมธอด

export const retryInterceptor: HttpInterceptorFn = (req, next) => {
  if (req.method !== 'GET') return next(req);
  return next(req).pipe(retry(2));
};

การลองใหม่โดยหน่วงเวลาและเพิ่มช่วงห่าง

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

import { timer } from 'rxjs';

next(req).pipe(
  retry({
    count: 3,
    delay: (_err, n) => timer(Math.pow(2, n) * 500)
  })
);

การลองใหม่ตามเงื่อนไข

ลองใหม่เฉพาะข้อผิดพลาดที่ควรลองใหม่ได้ (5xx หรือเครือข่าย) ไม่ควรลองใหม่เมื่อเป็นข้อผิดพลาด 4xx จากฝั่งไคลเอ็นต์ เพราะจะล้มเหลวอีกครั้ง

retry({
  count: 2,
  delay: (err, n) =>
    err.status >= 500 ? timer(n * 500) : throwError(() => err)
})

สถานะการโหลดส่วนกลาง

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

export class LoadingService {
  private active = signal(0);
  readonly isLoading = computed(() => this.active() > 0);
  start() { this.active.update(n => n + 1); }
  stop()  { this.active.update(n => Math.max(0, n - 1)); }
}

อินเตอร์เซปเตอร์การโหลด

เพิ่มตัวนับเมื่อเริ่มคำขอ และลดตัวนับเมื่อสรุปผล (สำเร็จหรือเกิดข้อผิดพลาด) โดยใช้ finalize

import { finalize } from 'rxjs';

export const loadingInterceptor: HttpInterceptorFn = (req, next) => {
  const loading = inject(LoadingService);
  loading.start();
  return next(req).pipe(finalize(() => loading.stop()));
};

เหตุผลที่ใช้ finalize

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

การแสดงสปินเนอร์

ผูกสัญญาณการโหลดในแม่แบบรากของคุณ

// root component template:
// @if (loading.isLoading()) {
//   <app-spinner />
// }

การยกเว้นคำขอเบื้องหลัง

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

import { HttpContextToken } from '@angular/common/http';
export const SKIP_LOADING = new HttpContextToken(() => false);
// in interceptor: if (req.context.get(SKIP_LOADING)) return next(req);

การรวมการลองใหม่กับการโหลด

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

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

ทดสอบความเข้าใจของคุณเกี่ยวกับการลองใหม่และตัวบ่งชี้การโหลด

สรุป: ตัวบ่งชี้การลองใหม่และการโหลด

อินเตอร์เซปเตอร์จัดการการลองใหม่และการโหลดทั่วทั้งระบบได้อย่างเป็นระเบียบ

  • retry พร้อมการหน่วงเวลา/การเพิ่มช่วงหน่วง ควรจำกัดไว้สำหรับกรณีที่ทำซ้ำได้อย่างปลอดภัยหรือกรณีที่ควรลองใหม่
  • ติดตามคำขอที่กำลังทำงานอยู่ในบริการ แล้วใช้ finalize เพื่อลดจำนวน
  • ใช้โทเค็นบริบทเพื่อข้ามคำขอเบื้องหลัง

คุณเรียนจบเรื่องอินเตอร์เซปเตอร์ของ HttpClient แล้ว

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

บทเรียน “การลองใหม่และตัวบ่งชี้การโหลด” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “การลองใหม่และตัวบ่งชี้การโหลด”

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

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

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

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

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

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

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

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

  1. ตัวสกัดกั้นแบบฟังก์ชัน
  2. การเพิ่มส่วนหัวการยืนยันตัวตน
  3. การจัดการข้อผิดพลาดทั่วทั้งแอป
  4. การลองใหม่และตัวบ่งชี้การโหลด
← กลับไปที่ Angular Academy