Preventing Multiple Submissions with exhaustMap

Snippet

Preventing Multiple Submissions with exhaustMap

The exhaustMap operator is used to ignore new values from a source observable while an inner observable (like an HTTP request) is still executing. This is perfect for preventing 'double-click' bugs during form submission.

snippet.js
javascript
submitClick$ = new Subject<void>();
 
saveData$ = this.submitClick$.pipe(
  exhaustMap(() => this.http.post('/api/data', { id: 1 }))
).subscribe();

angular

Breakdown

exhaustMap(() => ...)

Starts the inner observable and ignores any further clicks until the request completes.

this.http.post(...)

The asynchronous task that must finish before exhaustMap accepts a new input.

Previous snippet Next snippet

More Intermediate JavaScript exercises →

From your library

Preventing Multiple Submissions with exhaustMap

Related