Angular Academy · Ders

Yeniden Deneme ve Yükleme Göstergeleri

Yeniden denemeleri ve genel yükleme göstergelerini uygulayın

Yeniden Deneme ve Yükleme Göstergeleri, CoddyKit'te ücretsiz bir Angular Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Angular Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Angular Academy kursu toplamda 4 dersten oluşur.

Uygulama genelindeki iki ortak davranış

Interceptor'lar uygulama genelindeki iki davranış için idealdir: başarısız istekleri otomatik olarak yeniden denemek ve herhangi bir istek sürerken genel yüklenme durumunu izlemek.

retry ile yeniden deneme

Geçici başarısızlıkları yeniden denemek için retry'ı next(req)'ten sonra işleme hattına ekleyin.

import { retry } from 'rxjs';

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

Yalnızca güvenli istekleri yeniden deneme

İdempotent yöntemleri (GET, HEAD) serbestçe yeniden deneyin; yinelenen işlemlere yol açabileceğinden POST/PUT yöntemlerini yeniden denerken dikkatli olun. Yönteme göre koruma uygulayın.

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

Gecikme ve artan bekleme ile yeniden deneme

Yeniden denemelerin sunucuyu aşırı yüklememesi için gecikme ekleyin; dayanıklılık için üstel bekleme kullanın.

import { timer } from 'rxjs';

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

Koşullu yeniden deneme

Yalnızca yeniden denenebilir hatalarda (5xx, ağ hataları) yeniden deneyin; tekrar başarısız olacak 4xx istemci hatalarında denemeyin.

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

Genel yüklenme durumu

Bir yüklenme servisi, kullanıcı arayüzünün genel bir yüklenme simgesi gösterebilmesi için etkin isteklerin sayısını izler.

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

Yüklenme interceptor'ı

İstek başladığında sayacı artırın, finalize kullanarak tamamlandığında (başarılı veya hatalı) azaltın.

import { finalize } from 'rxjs';

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

finalize neden kullanılır

finalize, tamamlanma, hata veya abonelikten çıkma durumlarında çalışır; böylece yüklenme sayacının her zaman azaltılması garanti edilir. İstek başarısız olsa ya da iptal edilse bile yüklenme simgesi takılı kalmaz.

Yükleme göstergesini görüntüleme

Kök şablonunuzdaki yükleme sinyaline bağlanın.

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

Arka plan isteklerini hariç tutma

Bazı yoklama veya ön getirme istekleri yükleme göstergesini tetiklememelidir. Bunları atlamak için özel bir üst bilgi veya bağlam belirteci kullanın.

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

Yeniden deneme ve yüklemeyi birleştirme

Yeniden denemelerin tek bir yükleme aralığı içinde gerçekleşeceği şekilde sıralayın: yüklemeyi başlatın, dahili olarak yeniden deneyin ve bir kez sonlandırın. Tüm yeniden deneme girişimlerini kapsaması için yüklemeyi dışa yerleştirin.

Hızlı Kontrol

Yeniden deneme ve yükleme göstergeleri hakkındaki anlayışınızı sınayın.

Özet: Yeniden Deneme ve Yükleme Göstergeleri

Araya giriciler, yeniden denemeleri ve genel yükleme durumunu düzenli bir şekilde yönetir.

retry işlemini gecikme/artan bekleme süresiyle kullanın; bunu yalnızca yinelemeli veya yeniden denenebilir durumlarla sınırlandırın.
Etkin istekleri bir hizmette izleyin; sayacı azaltmak için finalize kullanın.
Arka plan isteklerini atlamak için bağlam belirteçlerini kullanın.

HttpClient araya giricileri konusunu tamamladınız.

Sıkça Sorulan Sorular

“Yeniden Deneme ve Yükleme Göstergeleri” dersi ücretsiz mi?

Evet — “Yeniden Deneme ve Yükleme Göstergeleri” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Angular Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Angular Academy kursu toplamda 4 dersten oluşur.

“Yeniden Deneme ve Yükleme Göstergeleri” dersinde ne öğreneceğim?

Yeniden denemeleri ve genel yükleme göstergelerini uygulayın Angular Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Angular Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Angular Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.

“Yeniden Deneme ve Yükleme Göstergeleri” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Angular Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Angular Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← Angular Academy Sayfasına Dön