Angular Academy · Pelajaran

Percobaan Ulang dan Indikator Pemuatan

Terapkan percobaan ulang dan pemutar pemuatan global.

Percobaan Ulang dan Indikator Pemuatan adalah pelajaran Angular Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Angular Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Angular Academy mencakup 4 pelajaran total.

Dua hal lintas fungsi

Interceptor sangat cocok untuk dua perilaku di seluruh aplikasi: otomatis mencoba kembali permintaan yang gagal dan melacak status pemuatan global saat ada permintaan yang sedang berlangsung.

Mencoba kembali dengan retry

Alirkan retry setelah next(req) untuk mencoba kembali kegagalan sementara.

import { retry } from 'rxjs';

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

Hanya mencoba kembali permintaan yang aman

Cobalah kembali metode idempoten (GET, HEAD) secara bebas; berhati-hatilah saat mencoba kembali POST/PUT karena dapat menyebabkan duplikasi. Lindungi berdasarkan metode.

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

Mencoba kembali dengan jeda dan backoff

Tambahkan jeda agar percobaan ulang tidak membebani server, dengan backoff eksponensial untuk meningkatkan ketahanan.

import { timer } from 'rxjs';

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

Percobaan ulang bersyarat

Hanya coba kembali error yang dapat dicoba ulang (5xx, jaringan), bukan error klien 4xx yang akan gagal lagi.

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

Status pemuatan global

Layanan pemuatan melacak jumlah permintaan aktif agar UI dapat menampilkan 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)); }
}

Interceptor pemuatan

Tambah penghitung saat permintaan dimulai, lalu kurangi saat selesai (berhasil atau error) 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 berjalan saat selesai, terjadi error, ATAU berhenti berlangganan, sehingga penghitung pemuatan selalu dikurangi—tidak ada pemutar yang macet meskipun permintaan gagal atau dibatalkan.

Menampilkan pemutar

Ikat sinyal pemuatan pada templat akar Anda.

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

Mengecualikan permintaan latar belakang

Beberapa permintaan polling atau prapengambilan seharusnya tidak memicu pemutar. Gunakan header khusus atau token konteks untuk melewatinya.

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 percobaan ulang dan pemuatan

Susun keduanya agar percobaan ulang berlangsung dalam satu rentang pemuatan: mulai memuat, lakukan percobaan ulang secara internal, lalu finalisasi sekali. Letakkan pemuatan di bagian terluar agar mencakup semua percobaan ulang.

Pemeriksaan Singkat

Uji pemahaman Anda tentang percobaan ulang dan indikator pemuatan.

Rangkuman: Indikator Percobaan Ulang & Pemuatan

Pencegat menangani percobaan ulang dan pemuatan global dengan rapi.

retry dengan jeda/mundur eksponensial; batasi pada kasus idempoten atau yang dapat dicoba ulang.
Lacak permintaan aktif dalam sebuah layanan; gunakan finalize untuk menguranginya.
Gunakan token konteks untuk melewati permintaan latar belakang.

Anda telah menyelesaikan Pencegat HttpClient.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Percobaan Ulang dan Indikator Pemuatan” gratis?

Ya — teks lengkap “Percobaan Ulang dan Indikator Pemuatan” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Angular Academy, upgrade ke CoddyKit PRO. Kursus Angular Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Percobaan Ulang dan Indikator Pemuatan”?

Terapkan percobaan ulang dan pemutar pemuatan global. Kamu berlatih Angular Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Angular Academy?

Tidak diperlukan pengalaman sebelumnya. Angular Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.

Berapa lama pelajaran “Percobaan Ulang dan Indikator Pemuatan” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Angular Academy ini?

Ya. Setiap pelajaran Angular Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke Angular Academy