Angular Academy · درس

عوامل الدمج

ادمجوا التدفقات باستخدام combineLatest وforkJoin

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

سبب دمج التدفقات

تنسق التطبيقات الفعلية بين مصادر غير متزامنة متعددة: عدة طلبات HTTP، وقيمة نموذج مع عامل تصفية، ونقرة مع أحدث حالة. تدمج معاملات الدمج عدة observables في واحد.

combineLatest

يبعث combineLatest مصفوفة تحتوي على أحدث قيمة من كل مصدر كلما بعث أي مصدر قيمة، وذلك بعد أن تكون جميع المصادر قد بعثت قيمة واحدة على الأقل.

import { combineLatest } from 'rxjs';

combineLatest([name$, age$]).subscribe(
  ([name, age]) => console.log(name, age)
);
// re-emits whenever name$ OR age$ changes

حالة استخدام combineLatest

يُعد مناسبًا جدًا لحالة واجهة المستخدم المشتقة: ادمجوا مصطلح البحث مع عامل تصفية الفئة لإنتاج استعلام.

combineLatest([term$, category$]).pipe(
  switchMap(([term, cat]) =>
    this.http.get('/api?q=' + term + '&cat=' + cat))
).subscribe(results => console.log(results));

forkJoin

ينتظر forkJoin حتى تكتمل جميع المصادر، ثم يبعث مصفوفة واحدة من قيمها الأخيرة. وهو النظير في RxJS لـ Promise.all.

import { forkJoin } from 'rxjs';

forkJoin({
  user: this.http.get('/api/user'),
  posts: this.http.get('/api/posts')
}).subscribe(({ user, posts }) => {
  console.log(user, posts);
});

تنبيه بشأن forkJoin

لا يبعث forkJoin أي شيء إذا لم يكتمل أحد المصادر مطلقًا، مثل interval، أو إذا حدث فيه خطأ قبل اكتماله. استخدموه مع المصادر محدودة المدة، مثل طلبات HTTP.

merge

يبسط merge عدة observables في واحد، ويبعث القيم عند وصولها من أي مصدر، من دون إجراء مطابقة بينها.

import { merge } from 'rxjs';

merge(clicks$, keypresses$).subscribe(
  event => console.log('event', event)
);
// emits whenever either source emits

zip

يطابق zip القيم حسب فهرسها: يبعث القيمة الأولى من كل مصدر، ثم الثانية من كل مصدر، وهكذا. وينتظر جميع المصادر لإنتاج القيمة التالية.

import { zip, of } from 'rxjs';

zip(of(1, 2, 3), of('a', 'b', 'c'))
  .subscribe(([n, l]) => console.log(n, l));
// [1,a], [2,b], [3,c]

startWith

يضيف startWith قيمة أولية في بداية التدفق، وهو مفيد لكي يتمكن combineLatest من الإرسال قبل أن يبعث كل مصدر قيمة.

import { startWith } from 'rxjs';

combineLatest([
  term$.pipe(startWith('')),
  category$.pipe(startWith('all'))
]).subscribe(([t, c]) => console.log(t, c));

withLatestFrom

لا يبعث withLatestFrom إلا عندما يبعث المصدر قيمة، مع إرفاق أحدث القيم من الـ observables الأخرى. يقود المصدر العملية، بينما تبقى المصادر الأخرى سلبية.

import { withLatestFrom } from 'rxjs';

saveClick$.pipe(
  withLatestFrom(formValue$)
).subscribe(([_, form]) => this.save(form));

concat للتدفقات التسلسلية

يشترك concat في كل مصدر بالترتيب، ولا ينتقل إلى التالي إلا بعد اكتمال الحالي. استخدموه عندما تحتاجون إلى تشغيل التدفقات واحدًا تلو الآخر بالترتيب الصارم.

import { concat, of } from 'rxjs';

concat(of(1, 2), of(3, 4))
  .subscribe(v => console.log(v));
// 1, 2, 3, 4 (second starts after first completes)

combineLatest مقابل forkJoin مقابل zip

combineLatest: أحدث قيمة من كل مصدر عند أي انبعاث.
forkJoin: آخر قيمة من كل مصدر بعد اكتمال الجميع.
zip: مطابقة حسب الفهرس.
اختاروا المعامل بناءً على حاجتكم إلى تحديثات مستمرة، أو دمج لمرة واحدة، أو مطابقة صارمة.

تحقق سريع

اختبروا مدى فهمكم لمعاملات الدمج.

مراجعة: معاملات الدمج

تنظم معاملات الدمج عدة تدفقات.

combineLatest: أحدث قيمة من كل مصدر عند أي انبعاث.
forkJoin: الدمج عند الاكتمال، على غرار Promise.all.
merge: تشبيك جميع الانبعاثات.
withLatestFrom: لقطة من المصادر الأخرى يقودها المصدر.

التالي: معاملات معالجة الأخطاء.

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

هل درس «عوامل الدمج» مجاني؟

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

ماذا ستتعلم في «عوامل الدمج»؟

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

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

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

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

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

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

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

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

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