typescript 43 lines · 7 steps

Cancelling stale searches with AbortController

A search client that aborts the in-flight request whenever a newer query arrives, so only the latest result wins.

Explained by highlit
Intermediate abortcontroller cancellation async fetch race-conditions
1type SearchResult = {
2 id: string;
3 title: string;
4};
5 
6export class SearchClient {
7 private controller: AbortController | null = null;
8 
9 async search(query: string): Promise<SearchResult[]> {
10 this.controller?.abort();
11 
12 const controller = new AbortController();
13 this.controller = controller;
14 
15 try {
16 const response = await fetch(
17 `/api/search?q=${encodeURIComponent(query)}`,
18 { signal: controller.signal },
19 );
20 
21 if (!response.ok) {
22 throw new Error(`Search failed with status ${response.status}`);
23 }
24 
25 const results = (await response.json()) as SearchResult[];
26 return results;
27 } catch (error) {
28 if (error instanceof DOMException && error.name === "AbortError") {
29 return [];
30 }
31 throw error;
32 } finally {
33 if (this.controller === controller) {
34 this.controller = null;
35 }
36 }
37 }
38 
39 cancel(): void {
40 this.controller?.abort();
41 this.controller = null;
42 }
43}
01 / 01
STEP 01

Walkthrough

Space play ←→ step click any line
Three takeaways
  1. 1Storing the active AbortController as state lets a newer call cancel the previous one before it resolves.
  2. 2Distinguishing AbortError from real failures keeps intentional cancellations from surfacing as errors.
  3. 3A finally block that only clears state when the controller still matches avoids wiping out a newer request's controller.

Related explainers

typescript 
import {
  CallHandler,
  ExecutionContext,
  Injectable,

Wrapping responses in a NestJS interceptor

interceptors rxjs response-shaping
Intermediate 7 steps
typescript 
type RetryOptions = {
  retries?: number;
  timeoutMs?: number;
  baseDelayMs?: number;

Retry with timeout and backoff in TypeScript

promises retry exponential-backoff
Intermediate 10 steps
typescript 
import { Pipe, PipeTransform, ChangeDetectorRef, NgZone, OnDestroy } from '@angular/core';
 
@Pipe({
  name: 'timeAgo',

A self-refreshing timeAgo pipe in Angular

impure-pipe change-detection timers
Advanced 10 steps
typescript 
const DIVISIONS: { amount: number; unit: Intl.RelativeTimeFormatUnit }[] = [
  { amount: 60, unit: "seconds" },
  { amount: 60, unit: "minutes" },
  { amount: 24, unit: "hours" },

Human-readable relative times with Intl

internationalization date-formatting lookup-table
Intermediate 7 steps
typescript 
import { Component } from '@angular/core';
import { FormControl, ReactiveFormsModule } from '@angular/forms';
import { HttpClient } from '@angular/common/http';
import { AsyncPipe } from '@angular/common';

Reactive type-ahead search in Angular

rxjs reactive-forms debounce
Intermediate 9 steps
typescript 
function throttle<T extends (...args: any[]) => void>(
  fn: T,
  limit: number
): (...args: Parameters<T>) => void {

Building a trailing-edge throttle in TypeScript

throttling closures generics
Intermediate 7 steps

Share this explainer

Here's the card — post it anywhere.

Cancelling stale searches with AbortController — share card
Made with highlit — turn any snippet into a walkthrough like this in about a minute.
Explain your code