javascript - 即使组件被销毁，异步进程是否按预期完成

Question

我有一个弹出模式，当用户点击模式中的提交时，它会转到我的数据库并在那里保存一些数据。之后关闭模态。但是，由于它是模态的，用户可以通过 ESC 按钮关闭它。所以我想确保即使用户按下了 ESC，异步仍会完成而不会在中间中断。

例如。

// from my modal component
onSubmit() {
    this.databaseService.saveToDatabase(data)
        .first()
        .subscribe(result => {
            console.log('complete')
            closeModal();
        }, error => {
            console.log(error)
        })
}

ngOnDestroy() {
    console.log('modal Desstroyed')
}

对于上面的例子，如果我一点击提交就按下 esc，我会从控制台看到

modal Destroyed

complete

这表明我的异步调用按预期完成，这很好。不过我觉得很奇怪……为什么 Angular 2 在异步过程完成之前不卡在组件上。即使组件已被销毁，我的 onSubmit 函数如何完成(假设调用 ngOnDestry() 时会发生这种情况)。在 Swift 等另一种语言中，除非所有过程都完成，否则 View Controller 不会被销毁(除非您指定它无论如何都会被销毁)

我还没有测试过的另一个例子...如果异步调用像下面这样长得多怎么办。如果我在按下提交按钮后立即关闭模式，我是否仍会达到“第二阶段完成”

// from my modal component
onSubmit() {
    this.databaseService.saveToDatabase(data)
        .first()
        .subscribe(result => {
            console.log('complete 1st stage')
            this.databaseService.saveToDatabase(reult)
                .first()
                .subscribe(result => {
                    console.log('2nd stage complete')
                    closeModal();
                })
        })
}

Answer 1

我不会谈论 JS 异步性，因为它已在 Stack Overflow 和许多教程网站等处被覆盖。我将只谈论 Observables 和订阅管理。

首先要知道的是“视情况而定”。这取决于您的 Observable 的创建方式，以及您管理订阅的方式。

当您使用 Observable.create 创建一个 Observable 时，您定义了取消订阅时要执行的操作。在此示例中，当您取消订阅时，间隔将停止:

let foo = Observable.create((observer)=>{
  // this is called when an observer subscribe to this Observable
  let interval = setInterval(()=>{
    observer.next("foo");
  });
  // returns what to do on unsubscribe...
  return ()=>{
    clearInterval(interval);
  }
});
let sub = foo.subscribe(data=>console.log(data));
window.setTimeout(()=>sub.unsubscribe(),1000); // passed 1000ms, unsubscribe and cancel the interval...

例如，angular 的Http 服务，当您取消订阅时，http 请求将被取消。

虽然您没有取消订阅您的 Observable 并且它没有完成，但它仍在运行，无论组件是否被销毁。

请注意，最好将 avoid multiple subscriptions ，因为当您强制管理订阅时，您无法从使用 RxJS 中获益。因此，最好使用可用的运算符来控制事件流。