25. switchMap: the latest request wins

switchMap — the latest wins

switchMap behaves differently: when a new outer value arrives, it cancels the current inner Observable (if it's still running) and starts a new one.

inputs:  'a' → 'an' → 'angular'
switchMap: request(a) → cancel → request(an) → cancel → request(angular) → result

The headline scenario — typeahead

A user types in a search box. Each intermediate request (for "a", "an") is already obsolete — only the last one matters. switchMap gives you "cancel the stale requests" for free, which is especially valuable for HTTP in Angular.

A recap of the four operators

• mergeMap — parallel, order doesn't matter.
• concatMap — a queue, strict order.
• switchMap — cancel the old, keep the new.
• exhaustMap (next lesson) — ignore the new while the old is running.

const { timer, switchMap, map } = Rx;

const source$ = hot('a 19ms b 19ms c|', {
  a: 0,
  b: 1,
  c: 2,
});

const result$ = source$.pipe(
  switchMap(value => {
    return timer(50).pipe(
      map(() => 'Done ' + value)
    );
  })
);