取消 rxjs 中的 http 订阅

Posted 2023-02-23

【中文标题】取消 rxjs 中的 http 订阅

【英文标题】：Cancelling http subscription in rxjs

【发布时间】：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 请求发出响应时。

【参考方案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();

这应该可以解决问题:)