如何在Angular和Rxjs中只调用一次ajax？

Question

有代码:

<button (click)="getData()">click<button>

getData(){
  this.http.get('/data.json').subscribe(data => consloe.log(data));
}

或使用帖子

 <button (click)="setData(data)">click<button>
    getData(){
      this.http.post('/data',{data}).subscribe(res =>consloe.log(res));
    }

当我连续多次点击按钮时,它会发送很多时间的http请求.我怎么避免它？

Answer 1

获取数据一次,例如在ngOnInit()方法中,并shareReplay(1)缓存结果.

ngOnInit(){
this.myData =  this.http.get('/data.json').shareReplay(1);
}

现在在您的按钮操作方法中订阅结果observable:

 getData(){
     this.myData.subscribe(data => consloe.log(data));
    }

无论您单击按钮多少次,上述技术都只会连接一次服务器.