57. الدمج المتقدم: switchMap (نمط HTTP)

ربما يكون switchMap هو العامل الأكثر أهمية في RxJS في تطوير Angular، حيث يُستخدم للتعامل مع السيناريوهات التي يؤدي فيها تدفق بيانات وارد (Observable الخارجي) إلى تشغيل عملية ثانوية جديدة غير متزامنة (Observable الداخلي، وعادة ما يكون طلب HTTP).

الحاجة إلى عوامل التسطيح (Flattening Operators)

عندما تستخدم map لإرجاع HTTP Observable، ينتهي بك الأمر بـ Observable من Observable (Observable<Observable<Data>>). تحل عوامل التسطيح (switchMap، mergeMap، concatMap) هذه المشكلة عن طريق الاشتراك في Observable الداخلي وإخراج قيمه مباشرة.

سلوك switchMap

يحتوي switchMap على ميزة بالغة الأهمية: الإلغاء. إذا أطلق المصدر الخارجي قيمة جديدة بينما لا يزال Observable الداخلي السابق قيد التشغيل (على سبيل المثال، قبل إرجاع طلب HTTP)، يقوم switchMap تلقائياً بإلغاء الطلب السابق قبل بدء الطلب الجديد.

حالة الاستخدام: إدخال بحث مباشر، حيث يجب أن تؤدي الكتابة السريعة إلى تشغيل استعلام لقيمة الإدخال الأخيرة فقط، وإلغاء عمليات البحث القديمة.

typescript import { switchMap, debounceTime, distinctUntilChanged } from 'rxjs/operators';

// تخيل أن 'searchTerm$' هو Observable لتغييرات الإدخال searchTerm$.pipe( // 1. الانتظار 300 مللي ثانية من الهدوء قبل المتابعة debounceTime(300), // 2. المتابعة فقط إذا كان المصطلح مختلفاً بالفعل عن الأخير distinctUntilChanged(), // 3. استخدام switchMap لإلغاء البحث المعلق السابق وبدء بحث جديد switchMap(term => { // إذا كان term فارغاً، أرجع Observable من مصفوفة فارغة if (!term) return of([]); // يُرجع Observable الداخلي (طلب HTTP) return this.dataService.search(term); }) ).subscribe(results => { this.searchResults = results; });

التباين مع mergeMap: يقوم mergeMap بتشغيل جميع Observables الداخلية بالتوازي، مما قد يؤدي إلى نتائج غير مرتبة. يضمن switchMap معالجة الاستجابة من المُشغِّل الأحدث فقط.