angular - 在rxjs中取消http订阅

Question

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

isComponentAlive = true;

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

ngOnDestroy() { 
  this.isComponentAlive = false;
}

我有一个取消按钮，可以导航到另一条路线。我想取消一个待处理的http请求，但是这种方法不起作用。我想做一些更明确的事情，然后调用取消订阅我的所有 http 请求订阅

Answer 1

一般来说，有两种方法可以做到这一点。

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()。

2. 使用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()