Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

RxJS sequence equivalent to promise.then()?

I used to develop a lot with promise and now I am moving to RxJS. The doc of RxJS doesn't provide a very clear example on how to move from promise chain to observer sequence.

For example, I usually write promise chain with multiple steps, like

// a function that returns a promise getPromise() .then(function(result) {    // do something }) .then(function(result) {    // do something }) .then(function(result) {    // do something }) .catch(function(err) {     // handle error }); 

How should I rewrite this promise chain in the RxJS style?

like image 940
Haoliang Yu Avatar asked Dec 30 '15 05:12

Haoliang Yu


People also ask

What is equivalent to switchMap in promises?

switchMap is one of the most useful RxJS operators because it can compose Observables from an initial value that is unknown or that change. Conceptually, it is similar to chaining then functions with Promises, but operates on streams (Promises resolve once).

What is difference between RxJS and promise?

the Promise can provide a single value, whereas the Observable is a stream of values (from 0 to multiple values), you can apply RxJS operators to the Observable to get a new tailored stream.

Which is better Observables or promises?

The biggest difference is that Promises won't change their value once they have been fulfilled. They can only emit (reject, resolve) a single value. On the other hand, observables can emit multiple results. The subscriber will be receiving results until the observer is completed or unsubscribed from.

Do Observables replace promises?

TL;DR they don't. It's been quite a while since I adopted RxJS and fell in love with the idea of Reactive Programming. It takes time and quite a bit of practice to really get to know reactive programming and learn to appreciate it.


2 Answers

For data flow (equivalent to then):

Rx.Observable.fromPromise(...)   .flatMap(function(result) {    // do something   })   .flatMap(function(result) {    // do something   })   .subscribe(function onNext(result) {     // end of chain   }, function onError(error) {     // process the error   }); 

A promise can be converted into an observable with Rx.Observable.fromPromise.

Some promise operators have a direct translation. For instance RSVP.all, or jQuery.when can be replaced by Rx.Observable.forkJoin.

Keep in mind that you have a bunch of operators that allows to transform data asynchronously, and to perform tasks that you cannot or would be very hard to do with promises. Rxjs reveals all its powers with asynchronous sequences of data (sequence i.e. more than 1 asynchronous value).

For error management, the subject is a little bit more complex.

  • there are catch and finally operators too
  • retryWhen can also help to repeat a sequence in case of error
  • you can also deal with errors in the subscriber itself with the onError function.

For precise semantics, have a deeper look at the documentation and examples you can find on the web, or ask specific questions here.

This would definitely be a good starting point for going deeper in error management with Rxjs : https://xgrommx.github.io/rx-book/content/getting_started_with_rxjs/creating_and_querying_observable_sequences/error_handling.html

like image 110
user3743222 Avatar answered Sep 23 '22 06:09

user3743222


A more modern alternative:

import {from as fromPromise} from 'rxjs'; import {catchError, flatMap} from 'rxjs/operators';  fromPromise(...).pipe(    flatMap(result => {        // do something    }),    flatMap(result => {        // do something    }),    flatMap(result => {        // do something    }),    catchError(error => {        // handle error    }) ) 

Also note that for all this to work, you need to subscribe to this piped Observable somewhere, but I assume it's handled in some other part of the application.

like image 25
mik01aj Avatar answered Sep 23 '22 06:09

mik01aj