Question

我有一个组件可以从 API 链接获取更新，但在组件销毁时 API 调用并未停止。我正在使用一个主题来这样做，我取消订阅它。我的 api 服务是

public getupdate(){
  return this.httpClient.get(this.serverGetUpdate)
}

我已在我的组件中订阅了此服务，并希望每 3 秒获取和更新一次，但我确实得到了更新。这是我的代码。

export class InprogressComponent implements OnInit, OnDestroy{


subject=new Subject()
  constructor(private apiservice: ApiService) {
    
   }
  
  ngOnInit(): void {
    
    this.getupdate()
  }
  getupdate(){
    this.subject.subscribe(x=>{timer(0,3000).pipe(switchMapTo(this.apiservice.getupdate()),takeWhile(x=>x["data"]=="Something")).subscribe(console.log)})
    this.subject.next()
  }

  

  ngOnDestroy(): void {
    //this.subject.next()
    this.subject.unsubscribe()
  }

}

我是 RxJS 的新手，我不明白为什么取消订阅后 API 调用没有停止。我也愿意接受其他建议。谢谢

Answer 1

试试这个

export class InprogressComponent implements OnInit, OnDestroy{

 dataSubscription: Subscription = new Subscription();

  ngOnInit(): void {

    this.getupdate()
  }
  getupdate() {
   this.dataSubscription = interval(3000).subscribe(() => {
     console.log('here');
   })
  }



  ngOnDestroy(): void {
    this.dataSubscription.unsubscribe()
  }

}

Answer 2

Unsubscribe nulls the internal array of subscriptions in the Subject, it does not unsubscribe the subject from it's source

 dataSubscription: Subscription;

  getupdate(){
    this.dataSubscription = this.subject.subscribe(x=>{timer(0,3000).pipe(switchMapTo(this.apiservice.getupdate()),takeWhile(x=>x["data"]=="Something")).subscribe(console.log)})
    this.subject.next()
  }

  

  ngOnDestroy(): void {
    this?.dataSubscription.unsubscribe()
  }

但是上面的 Brians 回答是实现您的功能的更简洁的方法。

Answer 3

试试这个：

export class InprogressComponent implements OnInit, OnDestroy{

 unsubscribe: Subject<void> = new Subject();

  ngOnInit(): void {

    this.getupdate()
  }
  getupdate() {
   this.apiService
      .getupdate()
      .pipe(takeUntil(this.unsubscribe))
      .subscribe(
        data => {
          // do your operation
        },
        error => {
         // error operation
        }
      );
  }



  ngOnDestroy(): void {
     this.unsubscribe.next();
    this.unsubscribe.complete();
  }

}

Angular RxJS 主题订阅和取消订阅

3 个答案: