מבוא ל- Observables ואיך הם שונים מהבטחות

' נצפים ', ' נצפים ', ' נצפים ' ... כן! היום נדבר על מילת השוק הנדונה לעיתים קרובות. נלמד גם במה הם שונים מהבטחות (לא שמעתם על הבטחות? אל תדאגו! תדעו בקרוב יותר). בואו נתחיל!

נתקלתי לראשונה במונח נצפה כשהתחלתי ללמוד זוויתית. למרות שזה לא תכונה ספציפית לזווית, זו דרך טיפול חדשהאסינכרוןבקשות. בקשת Async? אתה יודע את זה, נכון? לא! זה בסדר. בואו קודם נבין מהי בקשת אסינכרון .

בקשות Async

נו! בטח קראת על תכונות אסינכרוניות בעולם JavaScript. ' אסינכרוניה ' בעולם המחשבים פירושה שזרימת התוכנית מתרחשת באופן עצמאי. זה לא מחכה למשימה שתסתיים. זה עובר למשימה הבאה.

עכשיו, אולי אתה חושב - מה קורה למשימה שלא הסתיימה? עמית לעבודה מטפל באותן משימות שלא נגמרות. כן! ברקע, עמית לעבודה עובד ומטפל במשימות שלא נגמרות וברגע שהן נעשות, הוא מחזיר נתונים בחזרה.

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

אנו יודעים שפעולות אסינכרוניות אלה מחזירות תגובות, נתונים מסוימים לאחר הצלחה או שגיאה. כדי להתמודד עם זה, מושגים כמו הבטחות , הגיעו ליעדן , observables הגיע לשוק. נו! לא אכנס אליהם כעת מכיוון שסטענו מנושא המשנה שלנו, כלומר בקשת ' אסינכרון '. (אל דאגה! נושאים אלה יידונו בקרוב).

לאחר שדיברת בנקודות לעיל, ייתכן שיהיה לך תמונה גסה של בקשת ה- async . בואו נבהיר את זה. סינכרוני הבקשה היא אחד שבו הלקוח לא לחכות לתגובה. שום דבר לא חסום. בואו נבין מושג זה על ידי התבוננות בתרחיש נפוץ מאוד.

בעולם האינטרנט, זה די נפוץ לפגוע בשרת כדי לקבל נתונים כמו פרטי המשתמש, רשימה וכו '. אנו יודעים שזה ייקח זמן והכל יכול לבוא בעקבותיו (הצלחה / כישלון).

במקרה זה, במקום להמתין לבוא הנתונים, אנו מטפלים בו בצורה אסינכרונית (ללא המתנה) כדי שהיישום שלנו לא ייחסם. בקשות כאלה הן בקשות אסינכרוניות. אני חושב שעכשיו אנחנו ברורים עם זה. אז בואו נראה איך נוכל לטפל בפועל בבקשות אסינכרון אלה.

כפי שכבר אמרתי לך, Observables נתנה לנו דרך חדשה לטיפול בבקשות אסינכרון. הדרכים האחרות הן הבטחות, התקשרות חוזרות, וסינכרון / מחכה. אלה הדרכים הפופולריות. בואו נסתכל על שניים מהם שהם התקשרות חוזרת והבטחות.

התקשרות חוזרת

שיחות חוזרות הן דבר שכיח למדי. פונקציות להתקשרות חוזרות (כשמם כן הן) נקראות מאחור. זה כאשר הבקשה מסתיימת ומחזירה את הנתונים או השגיאה, פונקציות אלה מתקשרות. בדוק את הקוד להבנה טובה יותר:

const request = require(‘request’); request('//www.example.com', function (err, response, body) { if(error){ // Error handling } else { // Success } });

זוהי דרך אחת לטיפול בבקשת async. אך מה קורה כשאנחנו רוצים לבקש שוב לשרת נתונים לאחר הצלחת הבקשה הראשונה? מה אם נרצה להגיש בקשה שלישית לאחר אותה בקשה שנייה מוצלחת? מַחרִיד!

בשלב זה הקוד שלנו יהפוך למבולגן ופחות קריא. זה נקרא ' לעזאזל התקשרות '. כדי להתגבר על זה, הגיעו הבטחות. הם מציעים דרך טובה יותר לטיפול בבקשת async שמשפרת את קריאות הקוד. בואו נבין קצת יותר.

הבטחות

הבטחות הן אובייקטים שמבטיחים שיהיה להם ערך בעתיד הקרוב - או הצלחה או כישלון. להבטחות יש שיטות משלהןאז ו לתפוס . .then () נקרא כאשר ההצלחה מגיעה, אחרת שיטת ה- catch () קוראת.  הבטחותנוצרים באמצעות בונה ההבטחה . בדוק קוד כדי להבין טוב יותר.

function myAsyncFunction(name){ return new Promise(function(resolve, reject){ if(name == ‘Anchal’){ resolve(‘Here is Anchal’) } else{ reject(‘Oops! This is not Anchal’) } } } myAsyncFunction(‘Anchal’) .then(function(val){ // Logic after success console.log(val) // output - ‘Here is Anchal’ }) .catch(function(val){ //Logic after failure console.log(val) // output - ‘Oops! This is not Anchal’ })

כפי שאתה יכול לראות, myAsyncFunction למעשה מבטיח שיהיה לו ערך בעתיד הקרוב. .then () או .catch () נקרא בהתאם למעמד ההבטחה.

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

עכשיו הגיע הזמן ללמוד על הנושא העיקרי שלנו: נצפים.

מה הם נצפים?

נצפים הם כמו שיחות חוזרות והבטחות - האחראיות לטיפול בבקשות אסינכרון. תצפיות נצפות הן חלק מספריית RXJS . בספרייה זו הוצגו תצפיות.

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

דגם Pull & Push

כפי שכבר אמרתי לך, Push and Pull הם פרוטוקולי תקשורת בין יצרני נתונים לצרכנים. בואו נבין את שניהם אחד אחד.

מודל משיכה: במודל זה, צרכן הנתונים הוא המלך . המשמעות היא שצרכן הנתונים קובע מתי הוא רוצה נתונים מהיצרן. המפיק אינו מחליט מתי הנתונים יועברו. אתה יכול להבין טוב יותר אם אתה מתייחס לפונקציות אליו.

כידוע, פונקציות אחראיות לביצוע משימה כלשהי. לדוגמה, dataProducer היא פונקציה אשר פשוט מחזירה מחרוזת, כמו " היי נצפה ".

function dataProducer(){ return ‘Hi Observable’; }

עכשיו אתה יכול לראות שהפונקציה שלעיל לא תחליט מתי היא תעביר את המחרוזת 'היי נצפה'. היא תחליט על ידי הצרכן, כלומר קוד המכנה פונקציה זו. הצרכן הוא המלך. הסיבה לכך שזה נקרא מודל משיכה היא שמשימת משיכה היא קביעת התקשורת. זההלמשוך מודל . עכשיו, בואו ניכנס למודל הפוש .

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

אני מקווה שאתה זוכר הבטחות . כן, הבטחות עוקבות אחר מודל הדחיפה .  הבטחה (מפיק) מעבירה נתונים להתקשרות חוזרת ( .then () - צרכן). שיחות חוזרות אינן יודעות מתי הנתונים עתידים להגיע. הנה, ההבטחה (המפיק) היא המלך. זה קובע את התקשורת. לכן זה נקרא Push Model מכיוון שהמפיק אחראי.

כמו הבטחות, גם Observables עוקבים אחר מודל הדחיפה. אֵיך? תקבל את התשובה ברגע שאפרט על תצפיות נצפות. בואו נחזור לצפיות אז.

נצפים כפונקציות

כדי להבין פשוט, אתה יכול לחשוב על תצפיות כפונקציות. בואו נסתכל על הדוגמאות הבאות:

function dataProducer(){ return ‘Hi Observable’ } var result = dataProducer(); console.log(result) // output - ‘Hi Observable’ 

אתה יכול לקבל את אותה התנהגות באמצעות תצפית:

var observable = Rx.Observable.create((observer: any) =>{ observer.next(‘Hi Observable’); }) observable.subscribe((data)=>{ console.log(data); // output - ‘Hi Observable’ })

מלמעלה תוכלו לראות הן את הפונקציות והן את התצפיות המציגות את אותה התנהגות. זה עשוי להביא שאלה במוחכם - האם ניתן לצפייה זהה לפונקציות? לא. אני אבהיר תוך דקה מדוע התשובה היא לא. עיין בגרסה משוכללת של הדוגמה לעיל.

function dataProducer(){ return ‘Hi Observable’; return ‘Am I understandable?’ // not a executable code. } var observable = Rx.Observable.create((observer: any) =>{ observer.next(‘Hi Observable’); observer.next( ‘Am I understandable?’ ); }) observable.subscribe((data)=>{ console.log(data); }) Output : ‘Hi Observable’ ‘Am I understandable?’ 

אני מקווה שעכשיו תוכלו לראות לאיזה הבדל רציתי לטפל. מלמעלה תוכלו לראות,הן הפונקציות והן התצפיות הן עצלות . עלינו להתקשר (פונקציות) או להירשם כמנוי (תצפיות) כדי לקבל את התוצאות.

Subscriptions to observables are quite similar to calling a function. But where observables are different is in their ability to return multiplevalues called streams (a stream is a sequence of data over time).

Observables not only able to return a value synchronously, but also asynchronously.

var observable = Rx.Observable.create((observer: any) =>{ observer.next(‘Hi Observable’); setTimeout(()=>{ observer.next(‘Yes, somehow understandable!’) }, 1000) observer.next( ‘Am I understandable?’ ); }) output : ‘Hi Observable’ ‘Am I understandable?’ Yes, somehow understandable!’. 

In short, you can say observables are simply a function that are able to give multiple values over time, either synchronously or asynchronously.

You now have an outline about observables. But let’s understand them more by looking into different phases of observables.

Observable Phases

We have already seen from the above example how observables create and execute and come into play by subscription. Hence, there are four stages through which observables pass. They are:

1. Creation
2. Subscription.
3. Execution
4. Destruction.

Creation of an observableis done using a createfunction.

var observable = Rx.Observable.create((observer: any) =>{ }) 

To make an observablework, we have to subscribe it. This can be done using the subscribe method.

observable.subscribe((data)=>{ console.log(data); })

Execution of observables is what is inside of the create block. Let me illustrate with the help of an example:

var observable = Rx.Observable.create((observer: any) =>{ observer.next(‘Hi Observable’); setTimeout(()=>{ observer.next(‘Yes, somehow understandable!’) }, 1000) observer.next( ‘Am I understandable?’ ); }) 

The above code inside the create function is observable execution. The three types of values that an observable can deliver to the subscriber are:

observer.next(‘hii’);//this can be multiple (more than one) observer.error(‘error occurs’) // this call whenever any error occus. Observer.complete(‘completion of delivery of all values’) // this tells the subscriptions to observable is completed. No delivery is going to take place after this statement.

Let’s have a look below to understand all three values:

var observable = Rx.Observable.create((observer: any) =>{ try { observer.next(‘Hi Observable’); setTimeout(()=>{ observer.next(‘Yes, somehow understandable!’) }, 1000) observer.next( ‘Am I understandable?’ ); observer.complete(); observer.next(‘lAST DELIVERY?’ ); // above block is not going to execute as completion notification is already sent. } catch(err){ observer.error(err); } }) 

Last phase that comes into the market is destruction. After an error or a complete notification, the observable is automatically unsubscribed. But there are cases where we have to manually unsubscribe it. To manually do this task, just use:

var subscription = observable.subscribe(x => console.log(x)); // Later: subscription.unsubscribe();

This is all about the different phases through which an observable passes.

I think, now, we know what observables are? But what about the other question which is - how observables are different from promises? Let’s find the answer to it.

Promises vs observables

As we know, promises are for handling async requests and observables can also do the same. But where do they differ?

Observables are lazy whereas promises are not

This is pretty self-explanatory: observables are lazy, that is we have to subscribe observables to get the results. In the case of promises, they execute immediately.

Observables handle multiple values unlike promises

Promises can only provide a single value whereas observables can give you multiple values.

Observables are cancelable

You can cancel observables by unsubscribing it using the unsubscribe method whereas promises don’t have such a feature.

Observables provide many operators

There are many operators like map, forEach, filter etc. Observables provide these whereas promises does not have any operators in their bucket.

These are features that makes observables different from promises.

Now, it's time to end. I hope you have a better understanding of the hot topic of observables!

Thanks for reading!