TechCodeview

ב-RxJS, ניתן לצפות הוא פונקציה המשמשת ליצירת צופה ולצרפו למקור שממנו צפויים ערכים. לדוגמה, קליקים, אירועי עכבר מאלמנט DOM או בקשת Http וכו' הם הדוגמה ל-observable.

במילים אחרות, אתה יכול לומר שצופה הוא אובייקט עם פונקציות התקשרות חוזרות, שנקרא כאשר יש אינטראקציה ל-Observable. לדוגמה, המקור קיים אינטראקציה לדוגמה, לחץ על כפתור, Http בקשה וכו'.

ניתן גם להגדיר ניתנים לצפייה כאוספי Push עצלים בעלי מספר ערכים. בואו נראה דוגמה פשוטה כדי להבין כיצד משתמשים בתצפית כדי לדחוף את הערכים.

ראה את הדוגמה הבאה:

 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 יידחף לאחר שנייה אחת מאז התקשרה שיטת המנוי.

אם אתה רוצה להפעיל את הנצפה ולראות את הערכים שלעיל, עליך להירשם אליו. ראה את הדוגמה הבאה:

מפת reactjs

 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'); 

תְפוּקָה:

כאשר אנו מבצעים את התוכנית לעיל, נקבל את התוצאה הבאה במסוף:

נצפים הם הכללות של פונקציות

אנו יודעים ש-observables הם פונקציות הפועלות כקליקים, אירועי עכבר מאלמנט DOM או בקשת Http וכו', אבל נצפים הם לא כמו EventEmitters, וגם לא כמו Promises עבור מספר ערכים. במקרים מסוימים, ניתנים לצפייה עשויים לפעול כמו EventEmitters, כלומר כאשר הם משודרים לריבוי שידורים באמצעות RxJS Subjects, אבל בדרך כלל, הם לא מתנהגים כמו 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 

בוא נכתוב את אותה דוגמה, אבל עם Observables:

 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); }); 

תְפוּקָה:

אתה תראה את אותו פלט כמו לעיל:

אתה יכול לראות את זה מכיוון שגם הפונקציות וגם ה- Observables הם חישובים עצלים. אם לא תקרא לפונקציה, ה-console.log('Hello World!') לא יקרה. כמו כן, עם Observables, אם לא 'תתקשר' אליו עם מנוי, ה-console.log('Hello World!') לא יקרה.

עבודה של נצפה

ישנם שלושה שלבים בצפייה:

• יצירת תצפיות
• מנוי ל- Observables
• ביצוע תצפיות

יצירת תצפיות

ישנן שתי דרכים ליצור נקודות צפייה:

• שימוש בשיטת הבנאי Observable
• שימוש בשיטת יצירת () Observable

שימוש בשיטת הבנאי Observable

בואו ניצור צפייה באמצעות שיטת הבנאי הנצפה ונוסיף הודעה, 'זהו הראשון שלי שניתן לצפות בו' באמצעות השיטה subscriber.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') } ); 

מנוי ל- Observables

להירשם ל-objectable זה כמו לקרוא לפונקציה. זה מספק התקשרויות לאן הנתונים יימסרו.

אתה יכול להירשם לתצפית באמצעות התחביר הבא:

תחביר:

 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)); 

תְפוּקָה:

ביצוע תצפיות

ניתן לצפייה מתבצע כאשר הוא מנוי. בדרך כלל יש שלוש שיטות במשקיף שמקבלות הודעה:

הַבָּא(): שיטה זו משמשת לשליחת ערכים כמו מספר, מחרוזת, אובייקט וכו'.

לְהַשְׁלִים(): שיטה זו לא שולחת שום ערך. זה מצביע על כך שהניתן לצפייה הושלם.

שְׁגִיאָה(): שיטה זו משמשת כדי להודיע ​​על השגיאה אם ​​קיימת.

בוא נראה דוגמה שבה יצרנו את הנצפה עם כל שלוש ההתראות ונבצע את הדוגמה הזו:

קובץ 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.')); 

שיטת השגיאה מופעלת רק אם יש שגיאה. כאשר תפעיל את הקוד לעיל, תראה את הפלט הבא בקונסולה.

תְפוּקָה: