可观察的 rxJs 回调是异步的

Question

I have a map operation in my rxjs flow

streaming.map((data) => {
  //example async call
  methodCall.then((response) => {
    return data.test
  })
})
.filter((value) => ...);

The thing is filter is called before data.test is returned naturally. So I tried converting it to switchMap and returning an observable

streaming.switchMap((data) => {
  return Observable.create((observer) => {
    //example async call
    methodCall.then((response) => {
      observer.next(data.test);
      observer.complete();
    });
  });
})
.filter((value) => ......);

I assumed that IN THIS case since we are returning an observable with explicit timing on next is called the filter would be called ONLY after the observer.complete is called but filter was called prematurely with the value variable undefined.

How would I accomplish this normally using rxJs

Answer 1

I think you're missing a return statement or something. That's why it gives you unexpected results. The switchMap() operator subscribes to the Observable returned from its callback and reemits all its items until another Observable is returned. It doesn't wait for complete notification.

This should simulate your example:

function methodCall() {
  return new Promise(resolve => setTimeout(() => {
    resolve(123);
  }, 1000));
}

Observable.of(42)
  .do(value => console.log('start: ' + value))
  .switchMap((data) => {
    return Observable.create((observer) => {
      //example async call
      methodCall().then((response) => {
        observer.next(response);
        observer.complete();
      });
    });
  })
  .filter(value => true)
  .subscribe(value => console.log('next: ' + value));

See live demo: https://jsbin.com/focili/2/edit?js,console

Notice that 123 is emitted when the Promise resolves.

By the way, maybe you don't need to use switchMap() at all. RxJS 5 treats Observables, Promises, arrays, array-like objects, etc. the same way. This means you can interchange Observables for any of the mentioned above. For example you can use just concatMap() and the result is going to be the same:

function methodCall() {
  return new Promise(resolve => setTimeout(() => {
    resolve(123);
  }, 1000));
}

Observable.of(42)
  .do(value => console.log('start: ' + value))
  .concatMap(value => methodCall())
  .filter(value => true)
  .subscribe(value => console.log('next: ' + value));

See live demo: https://jsbin.com/wipofiv/2/edit?js,console

Notice that concatMap() receives a Promise but it still works as expected a you don't even need to transform it into an Observable.

Answer 2

Normally you can transform Promise to Observable with fromPromise

streaming.switchMap((data) => Observable.fromPromise(methodCall))
         .filter((value) => ...);

This does all ugly job and you just enjoy RxJS programming.

Probably before filter you would need to apply some .map to return data.test instead of data