Handling ajax request - Promise vs RxJs observable - rxjs operator preferences

Question

I am using Rxjs Observables to handle nested ajax request like the following way:

Rx.Observable.fromPromise($.getJSON('list1.json'))
   .switchMap(function responseA(aResponse){
       /* processing aResponse*/
       if(aResponse.fileName){
          return Rx.Observable.fromPromise($.getJSON(aResponse.fileName));
       } 
       return Rx.Observable.fromPromise($.getJSON('list2.json'));
   })
   .subscribe(function(finalResponse){
      /* processing finalResponse */
   });

But, as you know, it can also be done without using Observables and with only promises:

   $.getJSON('list1.json')
       .then(function responseA(aResponse){
           /* processing aResponse*/
           if(aResponse.fileName){
              return $.getJSON(aResponse.fileName);
           } 
           return $.getJSON('list2.json');
       })
       .then(function(finalResponse){
          /* processing finalResponse */
       });

Both code works, but it seems to me that it is more clean in terms of code to use promises.

Am I missing something here as I've heart that Rx Observable is more standard and efficient to handle asynchronous requests.

Which one (promise or Observable) will be the best in terms of code organization, convention and performances to handle ajax request ?

If I prefer to use Observable then which operators (switchMap/MergeMap) will be preferable in these kind of situation ?

Answer 1

Am I missing something here as I've heart that Rx Observable is more standard and efficient to handle asynchronous requests.

No, you're not missing anything. Rx is really useful but in that particular case promise based code is simpler.

In general, if you need a singular value - prefer a promise. If you need multiple values in/out - use observables (or the further ahead in spec async iterators).

Rx would be nice if you want to quickly need to add:

• Retrying the requests if they failed (with Observable.defer).
• Only caring about the last request.
• If you need built in cancellation.

It's worth mentioning - promises can do all that if you use a library. It's not a fundamental property of observables.

Rx really shines if your input is more than a single call. If you needed to make these calls whenever the user clicks something, ignore clicks on some condition, debounce it to 100ms and then only care about the last call - Rx would be really useful.

In this particular case - promises are simpler and fine. Your promise code can be simplified further:

$.getJSON('list1.json').then(x => $.getJSON(x.fileName || 'list2.json'))

Answer 2

There are couple of really good articles out there in web, here is couple of them, I hope those will help you to understand the difference properly.

1. What Promises Do That Observables Can’t

2. https://egghead.io/lessons/rxjs-rxjs-observables-vs-promises