不要在随后的按钮点击时调用 http

Question

I have a button user can click on that makes an http call to fetch data.

When user click the button the first time, I make http call. But I do not want to make the call again and just provide the data that was fetched earlier if the user decides to click the button again.

How do I do that? I have tried few things but none seem to work. It always makes the http request. I have tried to use "shareReplay" and "share" operators.

<button (click)=getData()>Click me</button>

getData() {
   return this.http.get('url').pipe(shareReplay(1));
}

I am using angular and rxjs.

This is what my actual code looks like.

getData() {
   source$.pipe(
   switchMap(sourceVal => {
      const source2$ = this.getSource2();
      const source3$ = this.getSource3(); -------- I do not want this call to be made on subsequent button clicks because it's a reference data
      return combineLatest([source2$, source3$])
   }),
   map(([source2Val, source3Val]) => {
      //do some processing
      return 'done'
   })
)
}

Answer 1

you can disable the button or prevent sending multiple requests via a variable.

fetching = false;

getData() {
   if(!this.fetching) {
       this.fetching = true;
       this.http.get('url').pipe(shareReplay(1), finalize(() => {
           this.fetching = false;
       }));
   }
}