Angular Academy · درس

إعادة المحاولة ومؤشرات التحميل

نفّذ عمليات إعادة المحاولة ومؤشرات التحميل العامة

إعادة المحاولة ومؤشرات التحميل درس مجاني في Angular Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 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 (سواء عند النجاح أو الخطأ) باستخدام 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 Interceptors.

الأسئلة الشائعة

هل درس «إعادة المحاولة ومؤشرات التحميل» مجاني؟

نعم — نص درس «إعادة المحاولة ومؤشرات التحميل» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Angular Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Angular Academy 4 دروس في المجموع.

ماذا ستتعلم في «إعادة المحاولة ومؤشرات التحميل»؟

نفّذ عمليات إعادة المحاولة ومؤشرات التحميل العامة تتمرن على Angular Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Angular Academy؟

لا تُشترط خبرة سابقة. Angular Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.

كم من الوقت يستغرق درس «إعادة المحاولة ومؤشرات التحميل»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Angular Academy هذا؟

نعم. كل درس في Angular Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى Angular Academy