Which RxJS operator prevents race conditions without canceling pending HTTP requests?

Answer

The RxJS operator that keeps pending HTTP requests alive while avoiding race conditions is exhaustMap. Unlike switchMap, which unsubscribes from the previous inner observable (causing the XHR or fetch request to abort), exhaustMap ignores new source emissions until the current inner observable completes. This guarantees that the server‑side operation finishes regardless of whether the client still needs the response.

How it works

When the source observable emits a value, exhaustMap projects it to an inner observable (e.g., an HTTP call). While that inner observable is in flight, any further source emissions are discarded. Once the inner observable completes, exhaustMap becomes ready to accept a new source value again.

Typical usage pattern

import { exhaustMap } from 'rxjs/operators';
// searchTerm$ is a stream of user input strings
searchTerm$.pipe(
  exhaustMap(term => http.get(`/api/search`, { params: { q: term } }))
).subscribe(response => {
  // handle the latest completed request only
});

Considerations

• If the HTTP request can hang indefinitely, combine exhaustMap with a timeout or takeUntil to ensure the inner observable eventually completes.
• Because exhaustMap drops new emissions while busy, very slow or failed requests may cause the UI to miss user input. Monitor request durations and adjust if necessary.