Un'introduzione agli osservabili e a come sono diversi dalle promesse

' Osservabili ', ' Osservabili ', ' Osservabili ' ... Sì! Oggi parleremo di questa parola spesso discussa del mercato. Impareremo anche come sono diversi dalle Promesse (non hai sentito parlare delle Promesse? Non preoccuparti! Ne saprai di più presto). Iniziamo!

Ho incontrato per la prima volta il termine Observable quando ho iniziato a imparare Angular. Sebbene non sia una funzionalità specifica di Angular, è un nuovo modo di gestireasincronorichieste. Richiesta asincrona? Lo sai, vero? No! Va bene. Prima di tutto capiamo cos'è una richiesta asincrona .

Richieste asincrone

Bene! Devi aver letto sulle funzionalità asincrone nel mondo JavaScript. " Asincronia " nel mondo dei computer significa che il flusso del programma avviene in modo indipendente. Non attende che un'attività venga completata. Passa all'attività successiva.

Ora, potresti pensare: cosa succede all'attività che non è terminata? Il collega gestisce questi compiti non completati. Sì! In background, un collega lavora e gestisce le attività non completate e, una volta completate, invia indietro i dati.

Questo può far sorgere un'altra domanda su come gestiamo i dati restituiti. La risposta è promesse , osservabili , callback e molti altri.

Sappiamo che queste operazioni asincrone restituiscono risposte, alcuni dati dopo il successo o un errore. Per gestire ciò, sono stati introdotti sul mercato concetti come Promesse , callback , osservabili . Bene! Non li approfondirò ora poiché abbiamo deviato dal nostro argomento secondario, ovvero la richiesta " asincrona ". (Non preoccuparti! Questi argomenti saranno discussi presto).

Dopo aver discusso i punti precedenti, potresti avere un quadro approssimativo di cosa sia la richiesta asincrona . Facciamo chiarezza. Una richiesta asincrona è quella in cui il client non attende la risposta. Niente è bloccato. Comprendiamo questo concetto guardando uno scenario molto comune.

Nel mondo del web, è abbastanza comune colpire il server per ottenere dati come i dettagli di un utente, un elenco e così via. Sappiamo che ci vorrà tempo e tutto può seguire (successo / fallimento).

in questo caso, invece di aspettare che arrivino i dati, lo gestiamo in modo asincrono (nessuna attesa) in modo che la nostra applicazione non venga bloccata. Tali richieste sono richieste asincrone. Penso che ora siamo chiari con esso. Quindi vediamo come possiamo effettivamente gestire queste richieste asincrone.

Come ti ho già detto, Observables ci ha fornito un nuovo modo di gestire le richieste asincrone. Gli altri modi sono promesse, richiamate e asincrono / attendono. Questi sono i modi popolari. Diamo un'occhiata a due di loro che sono richiami e promesse.

Richiami

I callback sono abbastanza comuni. Le funzioni di richiamata (come suggerisce il nome) vengono chiamate sul retro. Quando la richiesta viene completata e restituisce i dati o l'errore, queste funzioni vengono chiamate. Dai un'occhiata al codice per una migliore comprensione:

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

Questo è un modo per gestire una richiesta asincrona. Ma cosa succede quando si desidera richiedere nuovamente i dati al server dopo il successo della prima richiesta? E se volessimo fare una terza richiesta dopo quella seconda richiesta andata a buon fine? Orribile!

A questo punto, il nostro codice diventerà disordinato e meno leggibile. Questo si chiama " callback hell ". Per superarlo, le promesse sono arrivate. Offrono un modo migliore per gestire una richiesta asincrona che migliora la leggibilità del codice. Capiamo un po 'di più.

Promesse

Le promesse sono oggetti che promettono che avranno valore nel prossimo futuro: un successo o un fallimento. Le promesse hanno i loro metodi che lo sonopoi e cattura . .then () viene chiamato quando arriva il successo, altrimenti viene chiamato il metodo catch () .  Promessevengono creati utilizzando il costruttore di promesse . Dai un'occhiata al codice per capire meglio.

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

Come puoi vedere, myAsyncFunction sta effettivamente promettendo che avrà un certo valore nel prossimo futuro. .then () o .catch () viene chiamato in base allo stato della promessa.

Le promesse migliorano la leggibilità del codice . Puoi vedere quanto è leggibile il codice usando le promesse. Una migliore gestione delle operazioni asincrone può essere ottenuta utilizzando Promises. Questa è una breve introduzione di cosa sono le promesse, come gestiscono i dati e cosa portano le promesse di bellezza.

Ora è il momento di conoscere il nostro argomento principale: gli osservabili.

Cosa sono gli osservabili?

Gli osservabili sono anche come callback e promesse, che sono responsabili della gestione delle richieste asincrone. Gli osservabili fanno parte della libreria RXJS . Questa libreria ha introdotto gli osservabili.

Prima di capire cosa sia effettivamente un osservabile, è necessario comprendere due modelli di comunicazione: tirare e spingere . Questi due concetti sono protocolli di come i produttori di dati comunicano con i consumatori di dati.

Modello Pull & Push

Come ti ho già detto, Push e Pull sono protocolli di comunicazione tra produttori di dati e consumatori. Capiamo entrambi uno per uno.

Modello pull: in questo modello, il consumatore di dati è il re . Ciò significa che il consumatore di dati determina quando desidera i dati dal produttore. Il produttore non decide quando i dati verranno consegnati. Puoi capire meglio se colleghi le funzioni ad esso.

Come sappiamo, le funzioni sono responsabili di svolgere alcune attività. Ad esempio, dataProducer è una funzione che restituisce semplicemente una stringa, come " Hi Observable ".

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

Ora, puoi vedere che la funzione di cui sopra non deciderà quando consegnerà la stringa "Hi Observable". Deciderà il consumatore, cioè il codice che chiama questa funzione. Il consumatore è il re. Il motivo per cui viene chiamato modello pull è che l' attività pull determina la comunicazione. Questo èilmodello pull . Ora, andiamo nel modello Push .

Push Model: in questo modello, il produttore di dati è il re . Il produttore determina quando inviare i dati al consumatore. Il consumatore non sa quando arriveranno i dati. Capiamolo facendo un esempio:

Spero che tu ricordi le promesse . Sì, le promesse seguono il modello push .  A Promise (producer) consegna i dati al callback ( .then () - consumer). I callback non sanno quando arriveranno i dati. Qui, la promessa (produttore) è il re. Sta determinando la comunicazione. Ecco perché si chiama Push Model poiché il produttore è responsabile.

Come le promesse, anche gli osservabili seguono il modello push. Come? Otterrai la risposta una volta che elaborerò gli osservabili. Torniamo quindi agli osservabili.

Osservabili come funzioni

Per capire semplicemente, puoi pensare agli osservabili come a funzioni. Diamo un'occhiata agli esempi seguenti:

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

Puoi ottenere lo stesso comportamento usando un osservabile:

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

Dall'alto, puoi vedere sia le funzioni che gli osservabili mostrano lo stesso comportamento. Questo può farti venire in mente una domanda: gli osservabili sono uguali alle funzioni? No. Chiarirò tra un minuto perché la risposta è no. Dai un'occhiata a una versione elaborata dell'esempio sopra.

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

Spero che ora tu possa vedere quale differenza volevo affrontare. Dall'alto puoi vederesia le funzioni che gli osservabili sono pigri . Abbiamo bisogno di chiamare (funzioni) o sottoscrivere (osservabili) per ottenere i risultati.

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!