RxJS Observable 中的循环在调用完成或错误后不会停止答案

【问题标题】：Loops in RxJS Observable don't stop after calling complete or errorRxJS Observable 中的循环在调用完成或错误后不会停止
【发布时间】：2021-12-10 08:44:46
【问题描述】：

当调用observer.complete() 或observer.error() 时，观察者停止发送数据并被视为完成。但是，如果观察者中有一个 for 循环，即使在调用 observer.complete() 之后，循环也会继续运行。有人可以向我解释这种行为吗？我希望循环会被缩短。当前行为意味着间隔或 while 循环将永远在 Observable 中运行，除非我在代码中取消订阅。

在下面的sn-p中我添加了一个console.log，看看日志是否会在observer.complete()之后被调用。

    const testObservable = new Observable( observer => {
    for (let count = 0; count < 11; count++){
      observer.next(count);
      if (count > 5) {
        observer.complete()
        console.log("test")
      }
      if (count > 7) {
        observer.error(Error("This is an error"))
      }
    }}
  );

let firstObservable = testObservable.subscribe(
    next => {console.log(next)},
    error => { alert(error.message)},
    () => {console.log("complete")}
  )

【问题讨论】：

标签： javascript rxjs-observables

【解决方案1】：

正确销毁资源是 create 函数的职责。在您的情况下，observer.complete() 之后可能只有 return 语句。

但一般来说，如果需要，create 函数应该返回可观察对象完成时调用的拆卸函数 (TeardownLogic)。

new Observable( observer => {
  // observable logic, e.g. ajax request
  return () => {
    // teardown function, e.g. cancel ajax request
  };
});

一旦 observable 完成，Observable 将忽略未来对 next(...)、complete() 和 error(...) 的调用。这意味着 complete() 或 error(...) 函数被内部调用或 observable 被外部取消订阅。

new Observable( observer => {
  observer.next('a');
  observer.complete();
  // next calls will be ignored
  observer.next('b');
});

const observable = new Observable( observer => {
  setTimeout(
    () => observer.next('a'), // this will be ignored due to unsubscribe
    10
  );
});
const subscription = observable.subscribe(...);
subscription.unsubscribe();

【讨论】：