Основываясь на Endless, превосходном ответ , я создал полезную служебную функцию.

const fetchTimeout = (url, ms, { signal, ...options } = {}) => {
    const controller = new AbortController();
    const promise = fetch(url, { signal: controller.signal, ...options });
    if (signal) signal.addEventListener("abort", () => controller.abort());
    const timeout = setTimeout(() => controller.abort(), ms);
    return promise.finally(() => clearTimeout(timeout));
};

1. , Если тайм-аут достигнут, прежде чем ресурс выбирается тогда, выборка прерывается.
2. , Если ресурс выбирается, прежде чем тайм-аут достигнут тогда, тайм-аут очищен.
3. , Если входной сигнал прерывается тогда, выборка прерывается, и тайм-аут очищен.

const controller = new AbortController();

document.querySelector("button.cancel").addEventListener("click", () => controller.abort());

fetchTimeout("example.json", 5000, { signal: controller.signal })
    .then(response => response.json())
    .then(console.log)
    .catch(error => {
        if (error.name === "AbortError") {
            // fetch aborted either due to timeout or due to user clicking the cancel button
        } else {
            // network error or json parsing error
        }
    });

Hope, которая помогает.