AbortSignal.timeout

// 서버가 응답하지 않으면 아무 일도 일어나지 않는다
const response = await fetch("/api/data");

async function fetchWithTimeout(url, timeoutMs) {
  const controller = new AbortController();

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

  try {
    const response = await fetch(url, { signal: controller.signal });
    return response;
  } finally {
    clearTimeout(timeoutId); // 응답이 오면 타이머 정리
  }
}

const response = await fetch("/api/data", {
  signal: AbortSignal.timeout(5000), // 5초 후 자동 중단
});

try {
  const response = await fetch("/api/data", {
    signal: AbortSignal.timeout(5000),
  });
} catch (error) {
  if (error.name === "TimeoutError") {
    console.log("요청 시간 초과");
  } else if (error.name === "AbortError") {
    console.log("사용자가 취소함");
  } else {
    console.log("네트워크 오류:", error.message);
  }
}

const userCancelController = new AbortController();

// 취소 버튼 클릭 시
cancelButton.addEventListener("click", () => {
  userCancelController.abort();
});

// 타임아웃 시그널
const timeoutSignal = AbortSignal.timeout(5 * 60 * 1000); // 5분

// 둘 중 하나라도 발생하면 중단
const combinedSignal = AbortSignal.any([
  timeoutSignal,
  userCancelController.signal,
]);

try {
  const response = await fetch("/api/large-file", {
    signal: combinedSignal,
  });
} catch (error) {
  if (error.name === "TimeoutError") {
    showToast("다운로드 시간이 초과되었습니다");
  } else if (error.name === "AbortError") {
    showToast("다운로드가 취소되었습니다");
  }
}

// 10초 안에 클릭하지 않으면 리스너 자동 해제
element.addEventListener("click", handler, {
  signal: AbortSignal.timeout(10000),
});

import { readFile } from "fs/promises";

// 3초 안에 파일을 읽지 못하면 중단
const content = await readFile("/path/to/large-file", {
  signal: AbortSignal.timeout(3000),
});

import { setTimeout as delay } from "timers/promises";

// AbortSignal로 취소 가능한 딜레이
await delay(5000, null, {
  signal: AbortSignal.timeout(2000), // 2초 후 타임아웃
});

async function pollStatus(url, intervalMs, signal) {
  while (!signal?.aborted) {
    const response = await fetch(url, { signal });
    const data = await response.json();

    if (data.status === "complete") {
      return data;
    }

    // signal이 abort되면 이 대기도 취소된다
    await new Promise((resolve, reject) => {
      const timer = setTimeout(resolve, intervalMs);
      signal?.addEventListener(
        "abort",
        () => {
          clearTimeout(timer);
          reject(signal.reason);
        },
        { once: true }
      );
    });
  }

  throw signal.reason;
}

// 30초 타임아웃으로 폴링
const result = await pollStatus("/api/job/123", 2000, AbortSignal.timeout(30000));

// ❌ 잘못된 패턴
const signal = AbortSignal.timeout(5000);

// 첫 번째 요청이 5초 안에 완료돼도,
// 두 번째 요청 시점에 시그널이 이미 만료됐을 수 있다
const res1 = await fetch("/api/a", { signal });
const res2 = await fetch("/api/b", { signal }); // 남은 시간만큼만 적용됨

// ✅ 올바른 패턴: 요청마다 새 시그널 생성
const res1 = await fetch("/api/a", { signal: AbortSignal.timeout(5000) });
const res2 = await fetch("/api/b", { signal: AbortSignal.timeout(5000) });

// ⚠️ 주의: 루프 안에서 any()를 반복 생성
while (true) {
  const signal = AbortSignal.any([
    AbortSignal.timeout(5000),
    globalController.signal,
  ]);
  await fetch("/api/poll", { signal });
  await delay(1000);
}

while (true) {
  const iterController = new AbortController();
  const signal = AbortSignal.any([
    AbortSignal.timeout(5000),
    globalController.signal,
    iterController.signal,
  ]);

  try {
    await fetch("/api/poll", { signal });
  } finally {
    iterController.abort(); // 이 반복의 리스너들을 정리
  }

  await delay(1000);
}

try {
  await fetch(url, { signal: AbortSignal.timeout(5000) });
} catch (error) {
  if (error instanceof DOMException) {
    switch (error.name) {
      case "TimeoutError":
        // 타임아웃 처리
        break;
      case "AbortError":
        // 사용자 취소 처리
        break;
      default:
        throw error;
    }
  } else {
    // TypeError (네트워크 오류) 등
    throw error;
  }
}

// AbortSignal.any() 간이 폴리필
function abortSignalAny(signals) {
  const controller = new AbortController();

  for (const signal of signals) {
    if (signal.aborted) {
      controller.abort(signal.reason);
      return controller.signal;
    }
    signal.addEventListener(
      "abort",
      () => controller.abort(signal.reason),
      { once: true, signal: controller.signal }
    );
  }

  return controller.signal;
}

async function resilientFetch(url, options = {}) {
  const {
    timeoutMs = 10000,
    retries = 3,
    retryDelayMs = 1000,
    signal: externalSignal,
    ...fetchOptions
  } = options;

  for (let attempt = 0; attempt <= retries; attempt++) {
    const signals = [AbortSignal.timeout(timeoutMs)];
    if (externalSignal) signals.push(externalSignal);
    const signal = AbortSignal.any(signals);

    try {
      const response = await fetch(url, { ...fetchOptions, signal });

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

      return response;
    } catch (error) {
      const isLastAttempt = attempt === retries;
      const isUserCancel =
        error.name === "AbortError" && externalSignal?.aborted;

      if (isUserCancel || isLastAttempt) {
        throw error;
      }

      // 타임아웃이나 네트워크 오류면 재시도
      console.warn(`Attempt ${attempt + 1} failed: ${error.message}`);
      await new Promise((r) => setTimeout(r, retryDelayMs * (attempt + 1)));
    }
  }
}

// 사용 예시
const controller = new AbortController();
const data = await resilientFetch("/api/data", {
  timeoutMs: 5000,
  retries: 2,
  signal: controller.signal,
});