Angular Academy · درس

المعترضات الوظيفية

اعترض الطلبات باستخدام معترضات وظيفية

المعترضات الوظيفية درس مجاني في Angular Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Angular Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Angular Academy 4 دروس في المجموع.

ما هو المعترض

يقع معترض HTTP بين تطبيقكم والشبكة. وتمر من خلاله كل طلبات HTTP واستجاباته، مما يتيح لكم إضافة الترويسات أو التسجيل أو التحويل أو إعادة المحاولة أو معالجة الأخطاء في مكان مركزي واحد.

HttpInterceptorFn

يستخدم Angular الحديث المعترضات الوظيفية: إذ يتلقى HttpInterceptorFn الطلب ومعالجًا باسم next، ويعيد Observable لأحداث HTTP.

import { HttpInterceptorFn } from '@angular/common/http';

export const loggingInterceptor: HttpInterceptorFn = (req, next) => {
  console.log('request to', req.url);
  return next(req);
};

التسجيل باستخدام withInterceptors

وفّروا المعترضات عبر provideHttpClient(withInterceptors([...])) في إعدادات تطبيقكم.

import { provideHttpClient, withInterceptors } from '@angular/common/http';

export const appConfig = {
  providers: [
    provideHttpClient(withInterceptors([loggingInterceptor]))
  ]
};

المعالج التالي

استدعوا next(req) لتمرير الطلب عبر السلسلة. وما تعيدونه يصبح تدفق الطلب؛ أما عدم استدعاء next فيعني أن الطلب لن يُرسل أبدًا.

الطلبات غير قابلة للتغيير

إن HttpRequest غير قابل للتغيير. ولتغييره، يجب استخدام clone() مع تعديلاتكم، ثم تمرير النسخة إلى next.

export const interceptor: HttpInterceptorFn = (req, next) => {
  const cloned = req.clone({ setHeaders: { 'X-App': 'demo' } });
  return next(cloned);
};

تسلسل عدة معترضات

تعمل المعترضات بالترتيب المدرج. ويغلف كل منها المعترض التالي، لذا تشكّل المصفوفة خط معالجة: يرى أول معترض الطلب أولًا والاستجابة أخيرًا.

withInterceptors([authInterceptor, loggingInterceptor, errorInterceptor])
// auth runs first on the way out

استخدام inject() داخل المعترضات

تعمل المعترضات الوظيفية ضمن سياق حقن، ولذلك يمكنكم استخدام inject() للوصول إلى الخدمات مباشرةً.

import { inject } from '@angular/core';

export const authInterceptor: HttpInterceptorFn = (req, next) => {
  const token = inject(AuthService).token();
  return next(req); // use token to modify req
};

فحص الاستجابة

استخدموا tap على التدفق المُعاد لمراقبة الاستجابات، مثلًا لقياس الوقت أو التسجيل.

import { tap } from 'rxjs';

export const timingInterceptor: HttpInterceptorFn = (req, next) => {
  const start = Date.now();
  return next(req).pipe(
    tap(() => console.log(req.url, Date.now() - start, 'ms'))
  );
};

الاعتراض المشروط

يمكنكم التفرع بناءً على عنوان URL للطلب أو أسلوبه لتطبيق المنطق بشكل انتقائي.

export const apiOnly: HttpInterceptorFn = (req, next) => {
  if (!req.url.startsWith('/api')) return next(req);
  const cloned = req.clone({ setHeaders: { 'X-Api': '1' } });
  return next(cloned);
};

المعترضات الوظيفية مقابل المعترضات المعتمدة على الأصناف

تحل المعترضات الوظيفية محل HttpInterceptor الأقدم المعتمد على الأصناف. وهي أبسط، وقابلة للإزالة أثناء تحسين الشجرة، وسهلة الاختبار، كما تُسجَّل من دون رموز DI.

التوافق مع المعترضات المعتمدة على DI

إذا كان لا بد من استخدام المعترضات القديمة المعتمدة على الأصناف، فإن withInterceptorsFromDi() يوفّر جسرًا إليها. ويُفضّل استخدام المعترضات الوظيفية في التعليمات البرمجية الجديدة.

provideHttpClient(
  withInterceptors([authInterceptor]),
  withInterceptorsFromDi()
)

تحقق سريع

اختبروا مدى فهمكم للمعترضات الوظيفية.

مراجعة: المعترضات الوظيفية

تجمع المعترضات منطق HTTP المشترك بين أجزاء التطبيق في مكان مركزي.

HttpInterceptorFn: (req, next) => Observable.
سجّلوا المعترضات باستخدام withInterceptors([...]).
انسخوا الطلبات لتعديلها، واستدعوا next لمتابعة التنفيذ.
استخدموا inject() للوصول إلى الخدمات.

التالي: إضافة ترويسات المصادقة.

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

هل درس «المعترضات الوظيفية» مجاني؟

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

ماذا ستتعلم في «المعترضات الوظيفية»؟

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

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

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

كم من الوقت يستغرق درس «المعترضات الوظيفية»؟

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

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

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

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

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