في RxJS، الدالة التي يمكن ملاحظتها هي دالة تُستخدم لإنشاء مراقب وإرفاقه بالمصدر الذي يُتوقع منه القيم. على سبيل المثال، النقرات وأحداث الماوس من عنصر DOM أو طلب Http وما إلى ذلك هي مثال على ما يمكن ملاحظته.

بمعنى آخر، يمكنك القول أن المراقب هو كائن له وظائف رد الاتصال، والذي يتم استدعاؤه عندما يكون هناك تفاعل مع ما يمكن ملاحظته. على سبيل المثال، تفاعل المصدر على سبيل المثال، انقر فوق الزر، المتشعب طلب، الخ.

يمكن أيضًا تعريف العناصر القابلة للملاحظة على أنها مجموعات دفع كسولة ذات قيم متعددة. دعونا نرى مثالاً بسيطًا لفهم كيفية استخدام الأشياء القابلة للملاحظة لدفع القيم.

انظر المثال التالي:

 import { Observable } from 'rxjs'; const observable = new Observable(subscriber => { subscriber.next(10); subscriber.next(20); subscriber.next(30); setTimeout(() => { subscriber.next(40); subscriber.complete(); }, 1000); }); 

في المثال أعلاه، هناك شيء يمكن ملاحظته يدفع القيم 10، 20، 30 فورًا وبشكل متزامن عند الاشتراك، ولكن سيتم دفع القيمة 40 بعد ثانية واحدة منذ استدعاء طريقة الاشتراك.

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

قرص مرن

 import { Observable } from 'rxjs'; const observable = new Observable(subscriber => { subscriber.next(10); subscriber.next(20); subscriber.next(30); setTimeout(() => { subscriber.next(40); subscriber.complete(); }, 1000); }); console.log('These are the values just before subscribe'); observable.subscribe({ next(x) { console.log('We have got value ' + x); }, error(err) { console.error('something wrong occurred: ' + err); }, complete() { console.log('Done successfully'); } }); console.log('This value is just after subscribe'); 

انتاج:

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

الملاحظات هي تعميمات الوظائف

نحن نعلم أن العناصر القابلة للملاحظة هي وظائف تعمل كنقرات، وأحداث الماوس من عنصر DOM أو طلب Http، وما إلى ذلك، ولكن العناصر القابلة للملاحظة ليست مثل EventEmitters، ولا تشبه الوعود بقيم متعددة. في بعض الحالات، قد تتصرف العناصر القابلة للملاحظة مثل EventEmitters، أي عندما يتم بثها بشكل متعدد باستخدام موضوعات RxJS، ولكنها عادةً لا تتصرف مثل EventEmitters.

تشبه العناصر القابلة للملاحظة الوظائف ذات الوسيطات الصفرية، ولكنها تقوم بتعميمها للسماح بقيم متعددة.

دعونا نرى مثالا لفهم هذا بوضوح.

مثال بسيط للدالة:

 function foo() { console.log('Hello World!'); return 123; } const x = foo.call(); // same as foo() console.log(x); const y = foo.call(); // same as foo() console.log(y); 

انتاج:

سترى الإخراج التالي:

 'Hello World!' 123 'Hello World!' 123 

دعونا نكتب نفس المثال، ولكن مع الملاحظات:

 import { Observable } from 'rxjs'; const foo = new Observable(subscriber => { console.log('Hello World!'); subscriber.next(123); }); foo.subscribe(x => { console.log(x); }); foo.subscribe(y => { console.log(y); }); 

انتاج:

جافا الطريقة الرئيسية

سترى نفس الإخراج على النحو الوارد أعلاه:

يمكنك رؤية هذا لأن كلا من الوظائف والأشياء القابلة للملاحظة عبارة عن حسابات كسولة. إذا لم تستدعي الدالة، فلن يحدث الأمر console.log('Hello World!'). أيضًا، مع Observables، إذا لم تقم 'بالاتصال' بها بالاشتراك، فلن يحدث console.log('Hello World!') .

عمل ما يمكن ملاحظته

هناك ثلاث مراحل يمكن ملاحظتها:

• إنشاء الأشياء القابلة للملاحظة
• الاشتراك في الملاحظات
• تنفيذ الملاحظات

إنشاء الأشياء القابلة للملاحظة

هناك طريقتان لإنشاء الأشياء التي يمكن ملاحظتها:

• باستخدام طريقة البناء الملحوظة
• باستخدام طريقة إنشاء () يمكن ملاحظتها

باستخدام طريقة البناء الملحوظة

لنقم بإنشاء كائن يمكن ملاحظته باستخدام طريقة المُنشئ القابل للملاحظة وإضافة رسالة، 'هذا هو أول ما يمكن ملاحظته' باستخدام طريقة المشترك.next المتوفرة داخل Observable.

ملف testrx.js:

 import { Observable } from 'rxjs'; var observable = new Observable( function subscribe(subscriber) { subscriber.next('This is my first Observable') } ); 

يمكنك أيضًا إنشاء Observable باستخدام طريقة Observable.create() كما يلي:

 import { Observable } from 'rxjs'; var observer = Observable.create( function subscribe(subscriber) { subscriber.next('This is my first Observable') } ); 

الاشتراك في الملاحظات

الاشتراك في شيء يمكن ملاحظته يشبه استدعاء وظيفة. ويوفر عمليات الاسترجاعات حيث سيتم تسليم البيانات إلى.

يمكنك الاشتراك في عنصر يمكن ملاحظته باستخدام بناء الجملة التالي:

بناء الجملة:

 observable.subscribe(x => console.log(x)); 

انظر المثال أعلاه مع الاشتراك:

ملف testrx.js:

 import { Observable } from 'rxjs'; var observer = new Observable( function subscribe(subscriber) { subscriber.next('This is my first Observable') } ); observer.subscribe(x => console.log(x)); 

انتاج:

تنفيذ الملاحظات

يتم تنفيذ ما يمكن ملاحظته عند الاشتراك فيه. هناك بشكل عام ثلاث طرق في المراقب يتم إخطارها:

التالي(): تُستخدم هذه الطريقة لإرسال قيم مثل رقم أو سلسلة أو كائن وما إلى ذلك.

zeenat aman actor

مكتمل(): هذه الطريقة لا ترسل أي قيمة. ويشير إلى أن الملحوظة قد اكتملت.

خطأ(): يتم استخدام هذه الطريقة للتنبيه بالخطأ إن وجد.

دعونا نرى مثالاً حيث أنشأنا ما يمكن ملاحظته مع جميع الإشعارات الثلاثة وقمنا بتنفيذ هذا المثال:

ملف testrx.js:

 import { Observable } from 'rxjs'; var observer = new Observable( function subscribe(subscriber) { try { subscriber.next('This is my first Observable'); subscriber.next('Testing Observable'); subscriber.complete(); } catch(e){ subscriber.error(e); } } ); observer.subscribe(x => console.log(x), (e)=>console.log(e), ()=>console.log('Observable is completed now.')); 

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

انتاج: