javascript 37 lines · 8 steps

Cancelling stale requests in a search client

A closure tracks the in-flight request so each new search aborts the previous one before firing.

Explained by highlit

Intermediate closures abortcontroller async cancellation fetch

1export function createSearchClient(baseUrl) {
let inFlight = null;
3 
async function search(query, { signal } = {}) {
  if (inFlight) {
    inFlight.abort();
  }
8 
  const controller = new AbortController();
  inFlight = controller;
11 
  if (signal) {
    signal.addEventListener('abort', () => controller.abort(), { once: true });
  }
15 
  const url = `${baseUrl}/search?q=${encodeURIComponent(query)}`;
17 
  try {
    const response = await fetch(url, { signal: controller.signal });
    if (!response.ok) {
      throw new Error(`Search failed: ${response.status}`);
    }
    return await response.json();
  } catch (err) {
    if (err.name === 'AbortError') {
      return null;
    }
    throw err;
  } finally {
    if (inFlight === controller) {
      inFlight = null;
    }
  }
}
35 
return { search };
37}

01 / 01

STEP 01

Walkthrough

Space play ←→ step click any line

Three takeaways

1Keeping a reference to the current request lets you cancel it the moment a newer one starts.
2Chaining an external signal to an internal controller lets callers cancel while the client still manages its own state.
3Treating AbortError as a non-error keeps intentional cancellations from crashing the caller.

Related explainers

javascript

import { NextResponse } from 'next/server';
import { Redis } from '@upstash/redis';
 
const redis = Redis.fromEnv();

Sliding-window rate limiting in a Next.js route

rate-limiting redis sorted-set

Advanced 8 steps

javascript

const MAX_FILE_SIZE = 5 * 1024 * 1024;
 
const ALLOWED_TYPES = {
  'image/jpeg': ['jpg', 'jpeg'],

Validating file uploads by content, not just claims

input-validation security magic-bytes

Intermediate 7 steps

javascript

function zip(keys, values) {
  if (keys.length !== values.length) {
    throw new RangeError('zip expects arrays of equal length');
  }

Three ways to zip arrays in JavaScript

arrays higher-order-functions pairing

Intermediate 6 steps

java

public class TimedFetchService {
 
    private final ExecutorService executor = Executors.newFixedThreadPool(8);
    private final HttpClient httpClient = HttpClient.newHttpClient();

Enforcing HTTP timeouts with a Future

concurrency timeouts thread-pool

Intermediate 8 steps

package middleware
 
import (
	"net/http"

Role-based access control middleware in Gin

middleware authorization closures

Intermediate 7 steps

javascript

import { useCallback, useEffect, useState } from 'react';
 
export function useLocalStorage(key, initialValue) {
  const readValue = useCallback(() => {