RxJS: invoke two async calls, return the first that passes a condition, or a special value of none of them does

Question

Using RxJS, I want to invoke two different asynchronous operations, which may or may not return null. They may also take indefinite time to complete.

I want to achieve the following:

• If operation A returns value 1, then immediately return value 1
• If operation B returns value 2, then immediately return value 2
• If both operation A and B return null, then return null.

I suppose I can achieve the first two simply as follows:

const bothOperations = merge(callA(), callB());
const firstSuccess = bothOperations.first(res => res !== null);
return firstSuccess;

But how do I get the third possibility into this?

Answer 1

I think you could do it like this (I'm assuming you're using RxJS 5.5):

merge(callA(), callB())
  .pipe(
    filter(v !== null),
    concat(of(null)),
    take(1),
  )

The take(1) operator makes sure only one value is passed and concat(of(null)) appends null after both source Observables completed.

Just note that if both source Observables run indefinitely than this will never complete. You could add timeout() operator however.