إدارة العمليات غير المتزامنة وحالات التحميل

Loading StatesAsync OperationsError HandlingResource API

جدول مرجعي سريع

الأسلوب المعماري للعمليات غير المتزامنة	الخصائص والآلية البرمجية	متى يتم اعتماده هندسياً؟
الاشتراكات اليدوية التقليدية (Manual Subscriptions)	الاعتماد على الاشتراك المباشر في الـ Observables داخل ملف الصنف (`.ts`) وإدارتها يدوياً	عند الحاجة لتحكم دقيق جداً بخطوات تدفق البيانات القديمة أو التوافق مع مكتبات خارجية قديمة
الربط التلقائي عبر أنبوب القالب (`Async Pipe`)	استخدام أنبوب `async` مباشرة في قوالب HTML للاستماع للتدفقات وعرضها	في التطبيقات البسيطة التي لا تتطلب تعقيداً كبيراً في إدارة حالات التحميل والأخطاء المتقدمة
واجهة الإشارات الحديثة (`Signals & Resource API`)	إدارة الطلبات وحالات التحميل والأخطاء بصورة تفاعلية عبر النظام الحديث للإشارات	في معمارية أنگولر الحديثة لضمان أداء عالٍ، وتجربة مستخدم سلسة، وتقليل الأكواد التمهيدية

الشرح

تعد إدارة العمليات غير المتزامنة مثل جلب البيانات من الخوادم (HTTP Requests) والتعامل مع حالات التحميل (Loading) والأخطاء ركيزة أساسية لتجربة مستخدم سلسة. مع دخول نظام الإشارات (Signals) والواجهات الحديثة مثل resource, أصبح بإمكان المطورين إدارة حالة الاتصال بشكل تفاعلي ونظيف دون الحاجة لتعقيدات اشتراكات RxJS التقليدية المتعددة.

تفصيل فلسفة وعمل إدارة العمليات غير المتزامنة

التحكم التفاعلي في حالة الطلب:

تتيح لك البنى الحديثة فصل الحالات المختلفة للطلب (قيد التحميل، تم بنجاح، حدث خطأ) إلى إشارات واضحة، مما يسهل على واجهة المستخدم التفاعل الفوري وإظهار مؤشرات التحميل المناسبة (Spinners أو هياكل التحميل الوهمية Skeletons).

التكامل مع دورة حياة المكون:

تضمن معالجة العمليات غير المتزامنة داخل سياق الإشارات عدم حدوث تسريب في الذاكرة (Memory Leaks) وإلغاء الطلبات القديمة تلقائياً عند تغير مدخلات البحث أو مغادرة الشاشة.

أمثلة برمجية موسعة: ملفات وتنسيق متنوع للتوضيح العملي

المثال الأول: ملف الخدمة المسؤولة عن العمليات غير المتزامنة (async-data.service.ts)

typescript

1	import { Injectable, signal } from '@angular/core';
2	import { delay, of, throwError } from 'rxjs';
3
4	@Injectable({
5	providedIn: 'root'
6	})
7	export class AsyncDataService {
8	private isLoadingSignal = signal<boolean>(false);
9	private errorSignal = signal<string \| null>(null);
10
11	readonly isLoading = this.isLoadingSignal.asReadonly();
12	readonly error = this.errorSignal.asReadonly();
13
14	fetchDataStream() {
15	this.isLoadingSignal.set(true);
16	this.errorSignal.set(null);
17
18	// محاكاة طلب شبكة غير متزامن
19	return of({ message: 'تم استرجاع بيانات النظام بنجاح من الخادم المركزي' }).pipe(
20	delay(1500)
21	);
22	}
23	}

نصائح احترافية

—ستخدم حالات التحميل الواضحة لتجربة مستخدم متميزة!
—احرص دائماً على ربط أزرار الواجهة وعناصر العرض بحالة التحميل (isLoading) لمنع المستخدم من تكرار الضغط على الطلبات وإرسال طلبات زائدة غير مبررة للسيرفر.

الدرس السابق

دمج تدفقات RxJS مع الإشارات باستخدام toSignal و toObservable

الدرس التالي

بناء المتاجر المتقدمة باستخدام ميزات NgRx SignalStore

الأسلوب المعماري للعمليات غير المتزامنة

الخصائص والآلية البرمجية

متى يتم اعتماده هندسياً؟

الاشتراكات اليدوية التقليدية (Manual Subscriptions)

الاعتماد على الاشتراك المباشر في الـ Observables داخل ملف الصنف (`.ts`) وإدارتها يدوياً

عند الحاجة لتحكم دقيق جداً بخطوات تدفق البيانات القديمة أو التوافق مع مكتبات خارجية قديمة

الربط التلقائي عبر أنبوب القالب (`Async Pipe`)

استخدام أنبوب `async` مباشرة في قوالب HTML للاستماع للتدفقات وعرضها

في التطبيقات البسيطة التي لا تتطلب تعقيداً كبيراً في إدارة حالات التحميل والأخطاء المتقدمة

واجهة الإشارات الحديثة (`Signals & Resource API`)

إدارة الطلبات وحالات التحميل والأخطاء بصورة تفاعلية عبر النظام الحديث للإشارات

في معمارية أنگولر الحديثة لضمان أداء عالٍ، وتجربة مستخدم سلسة، وتقليل الأكواد التمهيدية

تفصيل فلسفة وعمل إدارة العمليات غير المتزامنة

التحكم التفاعلي في حالة الطلب:

التكامل مع دورة حياة المكون:

أمثلة برمجية موسعة: ملفات وتنسيق متنوع للتوضيح العملي

المثال الأول: ملف الخدمة المسؤولة عن العمليات غير المتزامنة (async-data.service.ts)

typescript

1	import { Injectable, signal } from '@angular/core';
2	import { delay, of, throwError } from 'rxjs';
3
4	@Injectable({
5	providedIn: 'root'
6	})
7	export class AsyncDataService {
8	private isLoadingSignal = signal<boolean>(false);
9	private errorSignal = signal<string \| null>(null);
10
11	readonly isLoading = this.isLoadingSignal.asReadonly();
12	readonly error = this.errorSignal.asReadonly();
13
14	fetchDataStream() {
15	this.isLoadingSignal.set(true);
16	this.errorSignal.set(null);
17
18	// محاكاة طلب شبكة غير متزامن
19	return of({ message: 'تم استرجاع بيانات النظام بنجاح من الخادم المركزي' }).pipe(
20	delay(1500)
21	);
22	}
23	}