取消 rxjs 中的 http 订阅答案

【问题标题】：Cancelling http subscription in rxjs取消 rxjs 中的 http 订阅
【发布时间】：2017-11-21 16:37:58
【问题描述】：

在我的 Angular 应用程序中，我希望能够取消使用 Rxjs 发出的 http 请求。场景：

isComponentAlive = true;

onSave() { 
    this.service.save(this.formValue).takeWhile(() => this.isComponentAlive).subscribe();
}

ngOnDestroy() { 
  this.isComponentAlive = false;
}

比我有一个取消按钮导航到另一条路线。我想取消一个挂起的 http 请求，但这种方式不起作用。我想做一些更清楚的事情，然后取消订阅我所有的 http 请求订阅

【问题讨论】：

takeWhile 不能用于取消挂起的 HTTP 请求，因为它采用的谓词称为 when it receives a value - 即当 HTTP 请求发出响应时。

标签： angular rxjs

【解决方案1】：

通常有两种方法可以做到这一点。

手动退订

onSave() { 
    this.sub = this.service.save(this.formValue).subscribe();
}

ngOnDestroy() { 
    this.sub.unsubscribe();
}

您也可以创建Subscription 类的一个实例，然后向其中添加处理程序：

private sub = new Subscription();

onSave() { 
    this.sub.add(this.service.save(this.formValue).subscribe());
}

ngOnDestroy() { 
    this.sub.unsubscribe();
}

这样您就不需要拥有多个订阅并在所有订阅上手动调用unsubscribe()。

使用Subject的实例完成源Observable

private subject = new Subject();

onSave() { 
    this.sub.add(this.service.save(this.formValue).takeUntil(subject).subscribe());
}

ngOnDestroy() { 
    this.subject.next();
}

顺便说一句，这是一个与您的问题非常相似的问题：RxJS: takeUntil() Angular component's ngOnDestroy()

【讨论】：

【解决方案2】：

要取消订阅，您需要保留对它的引用。

onSave() {
  this.saveSubscription = this.service.save(this.formValue).takeWhile(() => this.isComponentAlive).subscribe();
}

ngOnDestroy() {
  this.isComponentAlive = false;
  this.saveSubscription.unsubscribe();
}

这应该可以解决问题:)

【讨论】：