Angular Academy · درس

Observables والاشتراكات

أنشئوا تدفقات قابلة للمراقبة واشتركوا فيها

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

ما هي Observable

إنّ Observable عبارة عن تدفق كسول للقيم بمرور الوقت. لا يحدث شيء حتى تقوم بـالاشتراك. ويمكنه إصدار صفر من القيم أو أكثر، ثم إما أن يكتمل أو يحدث فيه خطأ.

‏RxJS هي المكتبة التفاعلية التي تأتي مع Angular لمعالجة الأعمال غير المتزامنة مثل HTTP والأحداث والمؤقتات.

إنشاء Observable

يستقبل مُنشئ Observable دالة مشترك. تستدعي next() لإصدار قيمة، وcomplete() للإنهاء، وerror() للإشارة إلى الفشل.

import { Observable } from 'rxjs';

const numbers$ = new Observable<number>(subscriber => {
  subscriber.next(1);
  subscriber.next(2);
  subscriber.next(3);
  subscriber.complete();
});

الاشتراك

يبدأ التنفيذ عند الاشتراك. مرّر كائن مراقب يحتوي على معالجات next وerror وcomplete.

numbers$.subscribe({
  next: v => console.log('value', v),
  error: err => console.error(err),
  complete: () => console.log('done')
});
// value 1, value 2, value 3, done

تتسم Observables بالكسل

لا تُشغَّل دالة المشترك حتى يتم استدعاء subscribe(). ويؤدي كل اشتراك إلى تنفيذ جديد ومستقل (cold observable).

const tick$ = new Observable(s => {
  console.log('executing');
  s.next(Date.now());
});
// "executing" is NOT logged until subscribe() runs

أداتا الإنشاء: of و from

نادرًا ما تستخدم المُنشئ. إذ تنشئ أدوات مساعدة مثل of وfrom كائنات observable بسرعة.

import { of, from } from 'rxjs';

of(10, 20, 30).subscribe(v => console.log(v)); // 10 20 30
from([1, 2, 3]).subscribe(v => console.log(v)); // 1 2 3
from(fetch('/api')).subscribe(res => console.log(res));

أداتا الإنشاء interval و timer

تُصدر interval أرقامًا متزايدة وفق جدول زمني، بينما تنتظر timer ثم تُصدر قيمة.

import { interval, timer } from 'rxjs';

interval(1000).subscribe(n => console.log('tick', n));
// 0, 1, 2, ... every second

timer(2000).subscribe(() => console.log('after 2s'));

تُرجع HttpClient كائنات Observable

في Angular، تُرجع أساليب HttpClient كائنات Observable. ولا يُرسل الطلب إلا عند الاشتراك.

import { inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';

const http = inject(HttpClient);
http.get('/api/users').subscribe(users => console.log(users));

كائن Subscription

تُرجع subscribe() كائن Subscription. استدعِ unsubscribe() لإيقاف تلقي القيم وتحرير الموارد.

import { interval } from 'rxjs';

const sub = interval(1000).subscribe(n => console.log(n));
// later
sub.unsubscribe(); // stops the stream

الاكتمال مقابل إلغاء الاشتراك

عندما يستدعي observable الدالة complete() أو error()، ينظف موارده تلقائيًا. أما التدفقات اللانهائية مثل interval وأحداث DOM، فيجب إلغاء الاشتراك فيها يدويًا.

الصيغة المختصرة لـ Observer

إذا كنت تهتم بالقيم فقط، فمرّر دالة واحدة — وستصبح معالج next.

of(1, 2, 3).subscribe(v => console.log(v));
// equivalent to { next: v => console.log(v) }

الساخنة مقابل الباردة (باختصار)

تبدأ Cold observables في إنتاج القيم عند الاشتراك، ويحصل كل مشترك على تنفيذ خاص به (HTTP وof وinterval). أما Hot observables فتنتج القيم بغض النظر عن وجود مشتركين، وتشارك القيم بينهم (سنتعرّف على Subjects لاحقًا).

تحقق سريع

اختبر مدى فهمك لـ observables.

مراجعة: Observables و Subscriptions

إنّ Observable تدفق كسول تفعّله باستخدام subscribe().

أصدر القيم باستخدام next، وأنهِ التدفق باستخدام complete، وأبلغ عن الفشل باستخدام error.
تُرجع أساليب HttpClient كائنات observable، ولا تُرسل الطلبات إلا عند الاشتراك.
ألغِ الاشتراك في التدفقات اللانهائية لتجنب التسربات.

التالي: Subjects وBehaviorSubject.

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

هل درس «Observables والاشتراكات» مجاني؟

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

ماذا ستتعلم في «Observables والاشتراكات»؟

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

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

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

كم من الوقت يستغرق درس «Observables والاشتراكات»؟

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

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

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

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

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