Angular Academy · Pelajaran

Cubaan Semula dan Penunjuk Pemuatan

Laksanakan cubaan semula dan pemutar pemuatan global.

Pelajaran 4 daripada 413 langkah

Cubaan Semula dan Penunjuk Pemuatan ialah pelajaran Angular Academy percuma di CoddyKit. Ini ialah pelajaran 4 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Angular Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Angular Academy merangkumi sejumlah 4 pelajaran.

Dua kebimbangan rentas aplikasi

Pencegat amat sesuai untuk dua tingkah laku seluruh aplikasi: mencuba semula permintaan yang gagal secara automatik dan menjejaki keadaan pemuatan global semasa sebarang permintaan sedang berjalan.

Mencuba semula dengan retry

Salurkan retry selepas next(req) untuk mencuba semula kegagalan sementara.

import { retry } from 'rxjs';

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

Mencuba semula hanya permintaan yang selamat

Cuba semula kaedah idempoten (GET, HEAD) secara bebas; berhati-hati apabila mencuba semula POST/PUT kerana ia mungkin menyebabkan pendua. Lindungi berdasarkan kaedah.

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

Mencuba semula dengan kelewatan dan pengunduran

Tambahkan kelewatan supaya percubaan semula tidak membebankan pelayan, dengan pengunduran eksponen untuk meningkatkan ketahanan.

import { timer } from 'rxjs';

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

Percubaan semula bersyarat

Cuba semula hanya untuk ralat yang boleh dicuba semula (5xx, rangkaian), bukan ralat klien 4xx yang akan gagal lagi.

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

Keadaan pemuatan global

Perkhidmatan pemuatan menjejaki bilangan permintaan aktif supaya UI boleh memaparkan pemutar global.

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)); }
}

Pencegat pemuatan

Tingkatkan kiraan apabila permintaan bermula dan kurangkannya apabila selesai (berjaya atau ralat) menggunakan finalize.

import { finalize } from 'rxjs';

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

Mengapa menggunakan finalize

finalize dijalankan apabila selesai, berlaku ralat, ATAU langganan dibatalkan, lalu memastikan kaunter pemuatan sentiasa dikurangkan — tiada pemutar yang tersekat walaupun permintaan gagal atau dibatalkan.

Memaparkan penunjuk pemuatan

Ikat isyarat pemuatan dalam templat akar anda.

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

Mengecualikan permintaan latar belakang

Sesetengah permintaan pengundian atau prapungutan tidak sepatutnya mencetuskan penunjuk pemuatan. Gunakan pengepala tersuai atau token konteks untuk melangkaunya.

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

Menggabungkan percubaan semula dan pemuatan

Susun kedua-duanya supaya percubaan semula berlaku dalam satu tempoh pemuatan: mulakan pemuatan, cuba semula secara dalaman, kemudian tamatkan sekali sahaja. Letakkan pemuatan di bahagian paling luar supaya semua percubaan semula diliputinya.

Semakan Pantas

Uji pemahaman anda tentang percubaan semula dan penunjuk pemuatan.

Jawab dalam pelajaran interaktif

Imbas Kembali: Penunjuk Percubaan Semula dan Pemuatan

Pencegat mengendalikan percubaan semula dan pemuatan global dengan kemas.

retry dengan kelewatan/undur semula; hadkan kepada kes idempoten atau kes yang boleh dicuba semula.
Jejaki permintaan aktif dalam perkhidmatan; gunakan finalize untuk mengurangkannya.
Gunakan token konteks untuk melangkau permintaan latar belakang.

Anda telah melengkapkan Pencegat HttpClient.

Percuma untuk bermula

Pelajari HTML dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 38
Pelajaran: 144

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Cubaan Semula dan Penunjuk Pemuatan” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Angular Academy, termasuk “Cubaan Semula dan Penunjuk Pemuatan”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Angular Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Cubaan Semula dan Penunjuk Pemuatan”?

Laksanakan cubaan semula dan pemutar pemuatan global. Anda berlatih Angular Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Angular Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Angular Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 4 daripada 4.

Berapa lamakah pelajaran “Cubaan Semula dan Penunjuk Pemuatan” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Angular Academy ini?

Ya. Setiap pelajaran Angular Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

← Kembali ke Angular Academy