Question

这是订阅Http请求并在页面上单击鼠标后将其取消的示例代码。如果我再次执行点击，我想重新订阅。

如何切换订阅？ FIDDLE

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秒钟后退订，请求会到达服务器吗？

Answer 1

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

this.flag != this.flag;

您可能是想

this.flag = !this.flag;

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

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

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

这是一个清理过的堆栈闪电战：https://stackblitz.com/edit/angular-fzlzcf

取消订阅RxJS之后是否可以重新订阅？

1 个答案: