Angular 7 Rxjs - 飞行中HTTP请求不取消订阅

Question

我无法理解为什么从带有附加步骤的rxjs订阅取消订阅不会取消正在进行的http请求。

看看：https://stackblitz.com/edit/angular5-http-example-nx8fza

您会在网络标签中注意到Chrome，其中一次点击取消请求而另一次则没有。

 getJoke(): void {
    this.jokeSub = this.api.getData()
      .subscribe(data => this.joke = data);

    this.jokeSub.unsubscribe();
  }

  // This method does not cancel requests in flight because of the .add step.
  getJoke2(): void {
    this.jokeSub2 = this.api.getData()
      .subscribe(data => this.joke = data).add(console.log("Added step"));

    this.jokeSub2.unsubscribe();
  }

旁注：我在使用rxjs 6在Angular 7中设置http拦截器时遇到了这个问题。当我的拦截器在管道中有任何逻辑时，我无法取消请求。我想如果能弄明白为什么它不在这里工作，我可以回答我更具体的问题。

Answer 1

.add方法添加了拆卸逻辑并返回该拆卸逻辑的新订阅。该新订阅被添加为初始订阅的内部订阅。因此，这些订阅具有亲子关系，如果您取消订阅父母 - 子女也被处置。

虽然取消订阅儿童不会完成父母。

这是来自docs on add method的解释

返回用于或创建要添加到内部订阅列表的订阅。此订阅可与remove（）一起使用，以从内部订阅列表中删除传递的拆卸逻辑。

这是一个操场。尝试评论一些超时：

const { timer } = rxjs;
const { finalize, take } = rxjs.operators;

const startedAt = Date.now();

const a = timer(0, 300).pipe(
    finalize(createTeardown('a')),
    take(10)
  )
  .subscribe(console.log);

const b = a.add(createTeardown('b'));
const c = a.add(createTeardown('c'));

// Try commenting out some of these
setTimeout(()=>a.unsubscribe(), 1000);
setTimeout(()=>b.unsubscribe(), 1000);
setTimeout(()=>c.unsubscribe(), 1000);


function createTeardown(name) {
  return () => console.log(name, Date.now() - startedAt);
}

<script src="https://unpkg.com/[email protected]/bundles/rxjs.umd.min.js"></script>

要修复您的特定代码示例，您需要单独存储原始订阅：

getJoke2(): void {
  this.jokeSub2 = this.api.getData()
    .subscribe(data => this.joke = data); // parent subscription (a)

  this.jokeSub2
    .add(() => console.log('Child teardown logic')); // child subscription (b)

  this.jokeSub2.unsubscribe();
}

注意：这基本上重复了AlesD的答案。将此加入到透明度的答案中

希望这可以帮助

Answer 2

正如另一个答案解释的那样，这是rxjs的工作方式我还添加了如何更改代码以使其像第一个样本一样工作。

getJoke2(): void {
    this.jokeSub2 = this.api.getData()
      .subscribe(data => this.joke = data);
    this.jokeSub2.add(console.log("Added step"));

    this.jokeSub2.unsubscribe();
}

还有一个link到你的StackBlitz的叉子，你可以看到它的工作原理。