A simple fetch() wrapper with timeout

fetch-timeout.ts

/**
 * A simple fetch() wrapper with timeout.
 * @param input - Same as `fetch()`.
 * @param init - Same as `fetch()`, but with an extra option `timeout` (defaults to no timeout).
 * @returns - Same as `fetch()`.
 */
export const fetchWithTimeout = (input: RequestInfo, init?: RequestInit & { timeout?: number }) => {
	if (typeof init?.timeout === 'number') {
		const controller = new AbortController();
		const timeoutId = setTimeout(() => controller.abort(new TimeoutError()), init.timeout);

		return fetch(input, {
			signal: controller.signal,
			...init,
		}).finally(() => clearTimeout(timeoutId));
	}

	return fetch(input, init);
};

/** Custom timeout error for fetchWithTimeout() */
export class TimeoutError extends Error {
	constructor() {
		super('Failed to fetch');
		this.name = 'TimeoutError';
	}
}

TODO:

• Prevent passing custom signal in init which would override the timeout signal and break stuff (use Omit<> type)