RxJS Approach leads to Callback Hell

Question

I would like to use ReactiveJS Observable method for the below use case.

IF MAIN_CACHE EXIST
  RETURN OUTPUT
ELSE IF DB CONNECTION EXIST
  CACHE MAIN_CACHE (1 Hour)
  CACHE FALLBACK_CACHE (3 Days)
  RETURN OUTPUT
ELSE IF FALLBACK_CACHE EXIST
  RETURN OUTPUT

I got the expected output but i feel this leads to Callback Hell and I think, still its not a good approach and i'm missing something in ReactiveJS Observable key benefits.

Below is my code and the whole code is in JS Bin Link

mainCache.subscribe(function (response) {
  console.log(response);
}, function (error) {
    dbData.subscribe(function (response) {
      console.log(response);
    }, function (error) {
        console.log('DB CAL Log info', error);
        fallbackCache.subscribe(function (response) {
          console.log('FALLBACK CACHE SERVED');
          console.log(response);
        }, function (error) {
          console.log('DB CAL Log error', error);
        });
    });
});

Any lights. much appreciated with working example.

score 4 · Answer 1 · edited May 23 '17 at 11:46

Your implementation indeed is callback hell. You can avoid it by composing your observables with the available rxjs operators, and subscribe at the end when you want to receive the data and have no more transformation. You can have a look at How to do the chain sequence in rxjs and Why we need to use flatMap?, to see how to chain operators, and use only one subscribe at the end of the chaining.

Here your chaining comes from catching errors, so like promises, the best practice is to catch early the errors, as you do, and for that you can use the catch operator`.

mainCache
  .do(console.log.bind(console))
  .catch(err => dbData.catch(err => {
     console.log('DB CAL Log info', error);
     return fallbackCache.do(response => {
          console.log('FALLBACK CACHE SERVED');
          console.log(response);       
     }).catch(console.log.bind(console, `DB CAL Log error`))
   }))

This is only tangential to your use case, but for information, I include also this link, which deals with retrial in case of miss (for example from dbData): retryWhen with backoff

above has only error use case and does not have happy path. can you add that like my example with setTimeout example as jsbin or stackoverflow snippet. — Alamelu Venkat, Mar 28 '17 at 00:14

RxJS Approach leads to Callback Hell

1 Answers1