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

Question

有代码:

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

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

或使用post

 <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);
}

现在在您的按钮操作方法中订阅结果可观察对象:

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

无论您点击按钮多少次，上述技术都只会连接一次服务器。