取消rxjs中的http訂閱

Question

在我的角度應用程序中，我希望能夠取消與Rxjs進行的http請求。場景：

isComponentAlive = true; 

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

ngOnDestroy() { 
    this.isComponentAlive = false; 
} 

比我有一個取消按鈕導航到另一條路線。我想取消掛起的http請求，但這種方式不起作用。我想做更清楚的事情，然後調用取消訂閱所有的http請求訂閱

Answer 1

爲了取消訂閱，您需要保留對其的引用。

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

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

，這應該做的伎倆:)

Answer 2

一般有兩種方法可以做到這一點。

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一個實例來完成源可觀察

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