Bevezetés a Megfigyelhetőkbe és azok különbsége az ígéretektől

Megfigyelhető ”, „ Megfigyelhető ”, „ Megfigyelhető ” ... Igen! Ma a piacnak erről a gyakran vitatott szaváról fogunk beszélni. Megtudjuk azt is, hogy miben különböznek az ígéretektől (még nem hallottál az ígéretekről? Ne aggódj! Hamarosan többet is megtudsz). Kezdjük!

A megfigyelhető kifejezéssel akkor találkoztam először, amikor elkezdtem tanulni az Angulart. Habár ez nem szögspecifikus szolgáltatás, a kezelés új módjaaszinkronkéréseket. Async kérés? Ugye tudod? Nem! Jól van. Először értsük meg, mi akkor az aszinkron kérés.

Async kérések

Jól! Biztosan olvasott az aszinkron funkciókról a JavaScript-világban. Az „ aszinkron ” a számítógépes világban azt jelenti, hogy a program folyamata függetlenül történik. Nem vár egy feladat befejezésére. A következő feladatra lép.

Most arra gondolhat, hogy mi történik a nem befejezett feladattal? A munkatárs kezeli azokat a befejezetlen feladatokat. Igen! A háttérben egy munkatárs dolgozik és kezeli azokat a befejezetlen feladatokat, és miután elkészültek, adatokat küld vissza.

Ez újabb kérdést vethet fel, hogyan kezeljük a visszaküldött adatokat. A válasz Ígéretek , Megfigyelhetőek , Visszahívások és még sok más.

Tudjuk, hogy ezek az aszinkron műveletek válaszokat adnak vissza, vagy a siker vagy a hiba után. Ennek kezelésére olyan fogalmak kerültek a piacra , mint ígéretek , visszahívások , megfigyelhetőek . Jól! Most nem fogok belemenni, mivel letértünk az altémánkról, azaz az „ aszinkron ” kérésről. (Ne aggódjon! Ezeket a témákat hamarosan megvitatjuk).

A fenti pontok megbeszélése után lehet, hogy durva képet kap arról, hogy mi az aszinkron kérés. Tisztázzuk. Az Async kérés az, amikor az ügyfél nem várja meg a választ. Semmi nincs blokkolva. Értsük meg ezt a koncepciót egy nagyon gyakori forgatókönyv alapján.

A webes világban elég gyakori a szerver elérése, hogy olyan adatokat kapjon, mint egy felhasználó adatai, egy lista stb. Tudjuk, hogy időbe telik, és bármi következhet (siker / kudarc).

ebben az esetben ahelyett, hogy megvárnánk az adatok érkezését, aszinkron módon kezeljük (nincs várakozás), hogy alkalmazásunkat ne blokkoljuk. Az ilyen kérések aszinkron kérelmek. Azt hiszem, most tisztában vagyunk vele. Lássuk, hogyan kezelhetjük ezeket az aszinkron kéréseket.

Mint már mondtam neked, az Observables új módszert adott nekünk az aszinkron kérések kezelésére. A további módok: ígéretek, visszahívások és aszinkron / várakozás. Ezek a népszerű módszerek. Vessünk egy pillantást kettőjükre, amelyek visszahívások és ígéretek.

Visszahívások

Visszahívások meglehetősen általánosak. A visszahívási funkciókat (ahogy a nevük is mutatja) hátul hívják meg. Ekkor a kérés befejeződik, és visszaadja az adatokat vagy hibákat, ezeket a függvényeket meghívják. Tekintse meg a kódot a jobb megértés érdekében:

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

Ez az aszinkron kérések kezelésének egyik módja. De mi történik, ha az első kérés sikere után ismét adatokat akarunk kérni a szervertől? Mi van, ha a sikeres második kérés után harmadik kérést szeretnénk benyújtani? Szörnyű!

Ekkor a kódunk rendetlen lesz és kevésbé olvasható. Ezt hívják „ visszahívási pokolnak ”. Ennek leküzdésére ígéretek érkeztek. Jobb módot kínálnak az aszinkron kérések kezelésére, amely javítja a kód olvashatóságát. Értsünk meg még egy kicsit.

Ígéretek

Az ígéretek olyan tárgyak, amelyek azt ígérik, hogy értékük lesz a közeljövőben - akár siker, akár kudarc. Az ígéreteknek megvannak a maguk módszereiaztán és fogd . .then () akkor hívódik meg, amikor siker jön, különben a catch () metódus hívja meg.  Ígéretekaz ígéret konstruktor segítségével jönnek létre . Vessen egy pillantást a kódra, hogy jobban megértse.

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

Amint láthatja, a myAsyncFunction valóban ígéretes, hogy a közeljövőben lesz némi értéke. .akkor () vagy .catch () az ígéret státusza szerint hívják meg.

Az ígéretek javítják a kód olvashatóságát . Az ígéretek segítségével láthatja, mennyire olvasható a kód. Az aszinkron műveletek jobb kezelése érhető el az Promises használatával. Ez egy rövid bemutatás arról, hogy mik az ígéretek, hogyan kezelik az adatokat és mit hordoznak a szépség ígéretei.

Itt az ideje, hogy megismerje fő témánkat: Megfigyelhetők.

Mik azok a megfigyelhetőek?

A megfigyelhetők olyanok is, mint a visszahívások és az ígéretek - amelyek felelősek az aszinkron kérelmek kezeléséért. A megfigyelhető elemek az RXJS könyvtár részét képezik . Ez a könyvtár az Observables-t mutatta be.

Mielőtt megértenéd, mi is a megfigyelhető valójában, meg kell értened két kommunikációs modellt: húzz és nyomj . Ez a két fogalom annak protokollja, hogyan kommunikálnak az adatok előállítói az adatok fogyasztóival.

Pull & Push modell

Mint már mondtam neked, a Push és a Pull kommunikációs protokollok az adatgyártók és a fogyasztók között. Értsük meg mindkettőt egyenként.

Pull Model: Ebben a modellben az adatok fogyasztója a király . Ez azt jelenti, hogy az adatok fogyasztója határozza meg, hogy mikor szeretne adatokat a termelőtől. A gyártó nem dönti el, hogy az adatokat mikor kézbesítik. Jobban megértheti, ha függvényeket kapcsol hozzá.

Mint tudjuk, a függvények felelősek valamilyen feladat elvégzéséért. Például a dataProducer egy olyan függvény, amely egyszerűen visszaad egy karakterláncot, mint például a " Hi Observable ".

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

Most láthatja, hogy a fenti függvény nem fogja eldönteni, hogy mikor adja ki a 'Hi Observable' karakterláncot. Ezt a fogyasztó fogja eldönteni, vagyis egy olyan kód, amely ezt a függvényt meghívja. A fogyasztó a király. Azért hívják pull modellnek, hogy a pull feladat meghatározza a kommunikációt. Ezahúzza Modell . Most menjünk be a Push modellbe .

Push modell: Ebben a modellben a termelő az adatok király . A gyártó meghatározza, hogy mikor kell adatokat küldeni a fogyasztónak. A Fogyasztó nem tudja, hogy mikor érkeznek adatok. Értsük meg egy példával:

Remélem, emlékszel az ígéretekre . Igen, Ígéretek kövesse a push- modellt .  Az ígéret (gyártó) adatokat küld a visszahívásnak ( .then () - fogyasztó). A visszahívások nem tudják, hogy mikor érkeznek adatok. Itt az ígéret (producer) a király. Ez határozza meg a kommunikációt. Ezért hívják Push Model-nek, mivel a gyártó a felelős.

Az ígéretekhez hasonlóan a Megfigyelhetők is nyomásmodellt követnek. Hogyan? A választ akkor kapja meg, ha részletesen bemutatom a megfigyelhető tárgyakat. Térjünk vissza akkor a megfigyelhető dolgokhoz.

Megfigyelhető funkciók

Az egyszerű megértéshez a megfigyelhető funkciókra gondolhat. Vessünk egy pillantást az alábbi példákra:

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

Megfigyelhető módon ugyanazt a viselkedést érheti el:

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

Fentről láthatja, hogy mind a függvények, mind a megfigyelhető elemek ugyanazt a viselkedést mutatják. Ez felvethet egy kérdést a fejében: vajon a megfigyelhetőek megegyeznek-e a funkciókkal? Nem. Egy perc alatt tisztázom, miért nemleges a válasz. Vessen egy pillantást a fenti példa bonyolult változatára.

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?’ 

Remélem, most meglátja, milyen különbséggel akartam foglalkozni. Fentről láthatja,a funkciók és a megfigyelhetők is lusták . Az eredmények eléréséhez hívnunk kell (függvényeket) vagy fel kell fizetnünk (megfigyelhető).

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!