Prevent multiple HTTP requests

Question

It is simple problem. I am working on angular2+ app and on button click I am executing HTTP Post request but it takes a while to respond. The issue is when the user hits the button multiple times before I got the response. I have figure it out in traditional way. Create a lock variable make sure it is false before executing the function and true while it is executing set it back to false when I got response. But I am wondering if there is RX smart way to do it ? Thanks

Answer 1

Your approach sounds fine. Alternatively, you could debounce the function that is making the HTTP requests. Use lodash debounce for this. I did look to see if there was an RxJs alternative to debounce but did not find one. I tried debounceTime but it wasn't the behaviour I wanted.

Answer 2

Please share the code. You can use RXJS share operator.

return this.service.pipe(
  map(response=> response),
  share()
);