未调用 RxJS5 终结运算符

Question

I'm trying to trigger a callback when all my observables are executed. In my other, older project i used finally like so and that worked like a charm:

this.myService.callDummy()
  .finally(() => console.log('Works!'))
  .subscribe(result => ...)

But now I'm using a newer version of RxJS with Pipeable operators , but the finally call (now renamed to finalize ) never gets executed. There is little information to be found and I'm not sure what I'm doing wrong.

combineLatest(
  this.route.queryParams,
  this.myService.callDummy1(),
  this.myService.callDummy2()
)
.pipe(finalize(() => console.log('Does not work!')))
.subscribe(results => ...);

Any help is appreciated.

Answer 1

In observables, firing and completing are not the same thing.

Even though each of the items emits a value, route.queryParams by definition will never complete since that is how Angular implements it, as a non terminating observable. You will need to manually complete it for your finalize to execute since combineLatest will only complete when EVERY observable being combined inside of it has completed.

combineLatest(
  this.route.queryParams.pipe(take(1)), // take(1) will complete the observable after it has emitted one value
  this.myService.callDummy1(),
  this.myService.callDummy2()
)
.pipe(finalize(() => console.log('Does not work!')))
.subscribe(results => ...);

This will complete.

Answer 2

Are you sure one of combined Observable s actually completes? With either .complete or .error ?

If none of the combined Observable s completes, finally will never be called.

Answer 3

If you want to do something when the observable completes then use the complete callback instead of finally/finalize:

.subscribe(
    value => { console.log(`Next: ${value}`); },
    error => { console.log(`Error: ${error}`); },
    ()    => { console.log(`Completed`); }
);

Anyway finally/finalize should also work and will be called on error OR complete. Im pretty sure that your observable never completes. You can confirm this by using my code above.

I see you are using Angular and subscribing to this.route.queryParams which never completes. You may create a new observable by use of first() so you get the value and it immediatly completes: this.route.queryParams.pipe(first())