时间戳

首页 > 解决方案 > 取消订阅 RxJS 后有没有办法重新订阅？

javascript - 取消订阅 RxJS 后有没有办法重新订阅？

问题描述

这是一个订阅 Http 请求并在鼠标单击页面时取消它的示例代码。如果我再次单击，我想重新订阅。

如何切换订阅？ 小提琴

export class AboutComponent implements OnInit {
constructor(private http:HttpClient){
}

flag=true;
documentclick = fromEvent(document, 'click');

 private data = {
    name:  'Samurai',
    profession:  'Developer'
  };
  ngOnInit(){

    let subscription:Subscription = this.getGoogle()   )
    .subscribe((res)=> {
     console.log(res);
   })

    this.documentclick.subscribe( e=>{
      if(this.flag){
        subscription.unsubscribe();
      }
      else{
        subscription = this.getGoogle().subscribe((res)=> {
          console.log(res);
        });
      }
      this.flag != this.flag;

    });
  }

getGoogle(): Observable<any> {
    return   this.http.get( 'https://jsonplaceholder.typicode.com/todos/1').pipe ( delay( 2000 ) )
  }

}

使用上面的代码，如果我在 2 秒内单击页面，我可以取消请求。但我无法再次点击再次订阅。

另外，如果有人能告诉我我是否真的用 unsubscribe() 取消了 http 请求，那就太好了？或者这只是一种错觉？如果我在 2 秒内取消订阅，请求会到达服务器吗？

标签： javascriptangulartypescriptrxjsobservable

解决方案

你的代码有一个逻辑错误，我认为只是一个错字。

this.flag != this.flag;

你可能是说

this.flag = !this.flag;

顺便说一句（与您的问题无关），您获得文档点击的方法是一种非角度的方式，您可能会遇到页面未更新的问题。考虑改用 HostListener：

@HostListener('document:click', ['$event'])
clicked(event) {
    ..
}

取消订阅 HTTP 请求应取消该请求。但是，您无法保证知道请求是否真的通过了服务器 - 在您取消订阅时服务器可能已经回复了。

这是一个清理过的 stackblitz：https ://stackblitz.com/edit/angular-fzlzcf

推荐阅读