RxJS中finally提前执行问题：需在所有Observable完成后触发

嘿，我懂你遇到的困扰——你的finally块总是跑在所有异步操作完成之前，根本没等到所有Promise处理完就触发了对吧？咱们来一步步搞定这个问题。

问题根源 #

你现在的代码里，finally是直接附加在最初的input Observable上的。而input是从数组[data1, data2]创建的，它会同步快速地把所有元素发射出去，然后立刻结束，所以finally会跟着input的结束直接执行，完全不管后面concatMap里的异步Promise还在处理流程中。

解决方案 #

只需要把finally移到经过concatMap处理后的output流上就行！这样整个流会等到所有Promise都resolve、所有元素都发射完成后，才会触发finally块。

修改后的代码（适配RxJS 5及更早版本） #

let data1 = 'test1'
let data2 = 'test2'
const input = Rx.Observable.from([data1, data2])
let output = input.concatMap((text) => {
  let promise = Promise.resolve(text)
  return Rx.Observable.fromPromise(promise)
})
.finally(() => { console.log('end') }) // 把finally移到concatMap之后的流上！
output.subscribe((x) => {console.log(x)})

如果用RxJS 6+版本（推荐用pipe操作符） #

注意RxJS 6+里finally改名为finalize，并且要放在pipe里：

let data1 = 'test1'
let data2 = 'test2'
Rx.Observable.from([data1, data2])
  .pipe(
    concatMap(text => Rx.Observable.fromPromise(Promise.resolve(text))),
    finalize(() => console.log('end'))
  )
  .subscribe(x => console.log(x))

现在执行顺序就会变成：先打印test1，再打印test2，最后才打印end，完全符合你“所有Observable完成后再执行finally”的预期。

内容的提问来源于stack exchange，提问作者ovg