如何在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请求。我该如何避免这种情况？

- 蒋建雨

---

如果数据不存在，将其保存到localstorage中，如果存在，则无需调用ajax即可返回数据，您觉得如何？ - omurbek

Answer 1

一次获取数据，例如在ngOnInit()方法中，并使用shareReplay(1)进行缓存结果。

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

现在，在您的按钮操作方法中订阅所得到的可观察对象：

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

上述技术将使服务器仅在您点击按钮多少次都只连接一次。

- siva636

---

如果您使用post方式提交并且想避免多次点击按钮，那么可以使用debounceTime()。例如：fromEvent(button, 'click').debounceTime(1000).subscribe() - siva636

share() 可以使用，但如果您有后续订阅者的情况，则无法解决问题。 shareReplay(1) 更有用，因为它意味着后续订阅者将获得从此 ajax 请求返回的最新值。 - Rich

是的，你说得对，我已经更新了答案。谢谢。 - siva636

检查 exhaustMap ..可以在这种情况下使用 - user1608841