Fetch JSON with Timeout + Abort

intermediate

By FrontendAtlas Team · Updated Feb 3, 2026

Implement fetchJson(url, options) that fetches JSON with built-in timeout and abort support. It should abort on timeout, respect an external AbortSignal, and throw on non-2xx HTTP responses. This mirrors real-world client utilities for APIs. Concepts: fetch, AbortController, timeouts, error handling.

Arguments

url: string — The request URL.
options: { timeoutMs?: number, signal?: AbortSignal, fetchFn?: Function, ...init } — Optional timeout, AbortSignal, and a fetch function override for testing. Any extra fields are passed to fetch.

Returns

Promise<any> — Resolves with parsed JSON or rejects on timeout, abort, or non-OK response.

Examples

Guides

Shipping Code Under PressurePlaybook JavaScript Problems That Actually Show UpPlaybook Build Great UI in 60 MinutesPlaybook

Preparing for interviews? Use guided tracks for structure, then drill company-specific question sets when you need targeted practice.

Explore interview tracks Browse company questions Open JavaScript prep path

Language

import fetchJson from './fetchJson';

const onAbort = () => {
        if (done) return;
        done = true;
        clearTimeout(timerId);
        reject(toAbortError(signal && signal.reason));
      };

if (signal) {
        if (signal.aborted) return onAbort();
        signal.addEventListener('abort', onAbort, { once: true });
      }

const timerId = setTimeout(finish, delay);
    });
  };
}

describe('fetchJson', () => {
  test('resolves JSON for ok responses', async () => {
    const fetchFn = makeFetch({ jsonData: { ok: true } });
    await expect(fetchJson('/ok', { fetchFn, timeoutMs: 100 })).resolves.toEqual({ ok: true });
  });

test('throws on non-ok status', async () => {
    const fetchFn = makeFetch({ ok: false, status: 404 });
    await expect(fetchJson('/missing', { fetchFn })).rejects.toThrow('HTTP 404');
  });

test('aborts on timeout', async () => {
    const fetchFn = makeFetch({ delay: 50, jsonData: { ok: true } });
    await expect(fetchJson('/slow', { fetchFn, timeoutMs: 10 })).rejects.toMatchObject({
      name: 'AbortError',
      message: 'Timeout'
    });
  });

test('respects external abort signal', async () => {
    const ac = new AbortController();
    const fetchFn = makeFetch({ delay: 30, jsonData: { ok: true } });
    const p = fetchJson('/abort', { fetchFn, signal: ac.signal });
    setTimeout(() => ac.abort(new Error('Cancelled')), 5);
    await expect(p).rejects.toMatchObject({ name: 'AbortError' });
  });
});

Run tests to see results.