JavaScript Ready | Программирование

AbortSignal.timeout() — встроенный способ задавать таймаут для fetch!

У fetch нет встроенного параметра для ограничения времени ожидания. Если сервер отвечает слишком долго или соединение зависает, запрос может оставаться активным неопределённое время.

Долгое время стандартным решением был AbortController в сочетании с setTimeout().

const controller = new AbortController();

const timeoutId = setTimeout(() => {
  controller.abort();
}, 5000);

try {
  const response = await fetch("/api/users", {
    signal: controller.signal
  });

  const data = await response.json();
  console.log(data);
} catch (error) {
  console.error(error);
} finally {
  clearTimeout(timeoutId);
}

Подход полностью рабочий, но даже для базового таймаута требует дополнительной логики: создание контроллера, запуск таймера и последующую очистку.

С появлением AbortSignal.timeout() эта задача решается значительно проще.

const response = await fetch("/api/users", {
  signal: AbortSignal.timeout(5000)
});

const data = await response.json();
console.log(data);

В этом случае AbortSignal автоматически перейдёт в состояние aborted через указанное количество миллисекунд, после чего операция будет отменена.

Для типового случая этого обычно достаточно. Обработка ошибок при этом остаётся стандартной.

try {
  const response = await fetch("/api/users", {
    signal: AbortSignal.timeout(5000)
  });

  if (!response.ok) {
    throw new Error(`HTTP ${response.status}`);
  }

  return await response.json();
} catch (error) {
  if (error.name === "TimeoutError") {
    console.log("Время ожидания истекло");
  } else {
    console.error(error);
  }
}

Если запрос был прерван через AbortSignal.timeout(), ошибка обычно имеет имя TimeoutError. Если отмена произошла вручную через AbortController.abort(), чаще это будет AbortError. Это даёт возможность разделять сценарии таймаута и ручной отмены на уровне обработки ошибок.

Механизм работает не только с fetch. Любой API с поддержкой AbortSignal может использовать тот же подход.

await someAsyncOperation({
  signal: AbortSignal.timeout(10000)
});

Отдельно стоит упомянуть AbortSignal.any(), который позволяет объединять несколько сигналов отмены.

const controller = new AbortController();

const signal = AbortSignal.any([
  controller.signal,
  AbortSignal.timeout(5000)
]);

await fetch("/api/users", { signal });

В таком случае операция завершится при срабатывании первого сигнала — либо по ручной отмене, либо по таймауту.

🔥 Если в проекте до сих пор используется ручная реализация таймаута через AbortController и setTimeout, сейчас во многих случаях её можно упростить.

📣

JS Ready | #практика

Please open Telegram to view this post