JavaScript 고급 비동기: AbortController와 최신 요청 경쟁 제어

학습 수준: JavaScript 고급 · 선수 지식: fetch 오류 처리, 실행 컨텍스트와 클로저, ES 모듈. Node.js 22 이상에서 실습하며 외부 패키지와 API 계정은 필요하지 않습니다.

• 요청의 완료와 반영 권한 구분
• 취소 가능한 최신 요청 로더
• 순서를 직접 통제하는 테스트
• 경계값과 적용 한계
• 완료 기준과 연습

요청이 끝났다는 사실과 결과를 반영할 권한은 다릅니다

사용자가 검색어를 A에서 B로 바꿨다고 가정합니다. A 요청이 먼저 출발했어도 B 응답이 먼저 도착할 수 있습니다. 모든 성공 응답을 그대로 저장하면 마지막 화면에는 A의 오래된 결과가 남습니다. A가 실패한 경우에도 같은 문제가 생깁니다. B가 성공한 뒤 A의 catch가 오류를 쓰면 최신 성공이 오래된 오류로 바뀝니다. 오래된 finally가 공용 loading 값을 false로 바꾸는 문제도 같은 종류입니다.

여기서는 요청을 시작할 때마다 증가하는 revision을 발급합니다. 각 호출은 자신이 받은 ticket을 지역 상수에 보관합니다. await 이후에는 ticket과 현재 revision을 비교하고, 둘이 같은 호출만 상태를 변경합니다. URL이나 검색어를 식별자로 쓰지 않는 이유는 같은 검색어를 연속 제출해도 서로 다른 요청이기 때문입니다. 이 규칙이 이 실습의 불변 조건입니다.

취소는 불필요한 작업을 줄이는 수단이고, ticket 검사는 반영 권한을 지키는 수단입니다. DOM 표준의 취소 모델에서 signal은 취소를 알리는 객체입니다. 임의의 Promise를 강제로 없애는 기능은 아닙니다. signal을 무시하는 라이브러리나 이미 다른 단계로 진행한 후처리가 있어도 오래된 결과를 걸러내려면 별도 소유권 검사가 필요합니다.

전체 구현: js-latest.mjs

아래 파일은 전역 상태 없이 loader별 클로저로 소유권을 보관합니다. load는 작업이 정리되면 이행되는 Promise를 반환하고 실제 성공·실패는 getState로 읽습니다. 따라서 load가 이행되었다고 HTTP 성공이라고 해석하면 안 됩니다. dispose 이후 재사용은 개발 실수로 보고 Promise를 거절합니다. cancel은 현재 결과를 비워 idle로 돌아가는 제품 규칙으로 정했습니다.

export async function fetchJson(url, signal) {
  const response = await fetch(url, { signal });
  if (!response.ok) throw new Error(`HTTP ${response.status}`);
  return response.json();
}

export function createLatestLoader(request = fetchJson) {
  let revision = 0;
  let controller = null;
  let disposed = false;
  let state = { status: 'idle' };

  async function load(key) {
    if (disposed) throw new Error('이미 정리한 loader입니다.');
    const ticket = ++revision;
    controller?.abort();
    const current = new AbortController();
    controller = current;
    state = { status: 'loading', key };
    try {
      const data = await request(key, current.signal);
      if (ticket !== revision || current.signal.aborted) return;
      state = { status: 'success', key, data };
    } catch (error) {
      if (ticket !== revision || current.signal.aborted) return;
      state = { status: 'error', key, error };
    } finally {
      if (ticket === revision) controller = null;
    }
  }

  function cancel() {
    ++revision;
    const previous = controller;
    controller = null;
    state = { status: 'idle' };
    previous?.abort();
  }

  function dispose() {
    cancel();
    disposed = true;
  }

  return { load, cancel, dispose, getState: () => ({ ...state }) };
}

import assert from 'node:assert/strict';
import { createLatestLoader, fetchJson } from './js-latest.mjs';

function harness() {
  const pending = new Map();
  const loader = createLatestLoader(
    (key, signal) =>
      new Promise((resolve, reject) => {
        pending.set(key, { resolve, reject, signal });
      }),
  );
  return { loader, pending };
}
let passed = 0;
{
  const { loader, pending } = harness();
  const first = loader.load('old');
  const second = loader.load('new');
  assert.equal(pending.get('old').signal.aborted, true);
  pending.get('new').resolve(['최신']);
  await second;
  pending.get('old').resolve(['과거']);
  await first;
  assert.deepEqual(loader.getState(), {
    status: 'success',
    key: 'new',
    data: ['최신'],
  });
  passed++;
}
{
  const { loader, pending } = harness();
  const first = loader.load('old');
  const second = loader.load('new');
  pending.get('old').reject(new Error('늦은 오류'));
  await first;
  assert.deepEqual(loader.getState(), { status: 'loading', key: 'new' });
  loader.cancel();
  assert.equal(pending.get('new').signal.aborted, true);
  pending.get('new').resolve([]);
  await second;
  assert.deepEqual(loader.getState(), { status: 'idle' });
  passed++;
}
{
  const { loader, pending } = harness();
  const failed = loader.load('bad');
  pending.get('bad').reject(new Error('실패'));
  await failed;
  assert.equal(loader.getState().error.message, '실패');
  const a = loader.load('same');
  const old = pending.get('same');
  const b = loader.load('same');
  pending.get('same').resolve([]);
  await b;
  old.resolve(['오래된 값']);
  await a;
  assert.deepEqual(loader.getState().data, []);
  passed++;
}
{
  const { loader, pending } = harness();
  const task = loader.load('pending');
  loader.dispose();
  pending.get('pending').resolve('late');
  await task;
  assert.equal(loader.getState().status, 'idle');
  await assert.rejects(loader.load('again'), /정리/);
  passed++;
}
{
  const controller = new AbortController();
  controller.abort();
  await assert.rejects(fetchJson('data:application/json,%7B%7D', controller.signal), {
    name: 'AbortError',
  });
  passed++;
}
{
  const { loader, pending } = harness();
  const a = loader.load('old-error');
  const b = loader.load('winner');
  pending.get('winner').resolve('B');
  await b;
  pending.get('old-error').reject(new Error('late error'));
  await a;
  assert.deepEqual(loader.getState(), { status: 'success', key: 'winner', data: 'B' });
  passed++;
}
{
  const { loader, pending } = harness();
  const task = loader.load('cancelled');
  loader.cancel();
  loader.cancel();
  pending.get('cancelled').reject(new Error('late rejection'));
  await task;
  assert.deepEqual(loader.getState(), { status: 'idle' });
  const resumed = loader.load('resume');
  pending.get('resume').resolve(0);
  await resumed;
  assert.equal(loader.getState().data, 0);
  loader.dispose();
  loader.dispose();
  await assert.rejects(loader.load('blocked'), /정리/);
  passed++;
}
{
  const reason = new Error('custom cancel');
  const controller = new AbortController();
  controller.abort(reason);
  await assert.rejects(
    fetchJson('data:application/json,{}', controller.signal),
    (error) => error === reason,
  );
  passed++;
}
console.log(`PASS ${passed} scenarios`);

js-latest.mjs 전체 코드 보기

revision은 이전 controller를 취소하기 전에 증가시킵니다. 이전 요청이 catch로 넘어왔을 때 이미 반영 권한이 없도록 만드는 순서입니다. 새 요청마다 새 AbortController를 만드는 이유는 한 번 취소된 signal을 원래 상태로 되돌릴 수 없기 때문입니다. finally에서는 자기 ticket이 여전히 최신일 때만 controller 참조를 비웁니다. 이 조건이 없으면 A의 finally가 B의 controller를 지워서 이후 cancel이 B를 취소하지 못합니다.

getState의 복사는 가장 바깥 객체만 복사합니다. data 내부 객체까지 불변으로 만드는 기능은 아니므로 소비자는 상태를 읽기 용도로 사용합니다. UI에 연결할 때는 load 직후와 완료 후 상태를 렌더링하고, 화면을 떠날 때 dispose를 호출하는 연결부가 별도로 필요합니다. 이 글은 프레임워크 생명주기보다 경쟁 제어 자체를 검증하는 콘솔 실습입니다.

전체 테스트: js-latest.test.mjs

실제 시간으로 100ms와 300ms를 기다리면 느린 환경에서 결과가 흔들릴 수 있습니다. 이 테스트는 resolve와 reject를 직접 보관해 완료 순서를 통제합니다. 일부러 signal을 무시하는 요청 함수를 넣어 취소 기능만으로는 보장할 수 없는 조건을 만듭니다. 실제 fetch 취소 동작은 마지막 시나리오에서 별도로 확인합니다.

import assert from "node:assert/strict";
import { createLatestLoader, fetchJson } from "./js-latest.mjs";

function harness() {
  const pending = new Map();
  const loader = createLatestLoader((key, signal) =>
    new Promise((resolve, reject) => {
      // 의도적으로 signal을 무시해 취소 이후의 늦은 응답도 재현합니다.
      pending.set(key, { resolve, reject, signal });
    })
  );
  return { loader, pending };
}
let passed = 0;

// 최신 응답이 먼저 끝나고 오래된 성공이 뒤늦게 도착합니다.
{
  const { loader, pending } = harness();
  const first = loader.load("old");
  const second = loader.load("new");
  assert.equal(pending.get("old").signal.aborted, true);
  pending.get("new").resolve(["최신"]);
  await second;
  pending.get("old").resolve(["과거"]);
  await first;
  assert.deepEqual(loader.getState(), { status: "success", key: "new", data: ["최신"] });
  passed++;
}
// 오래된 실패와 finally가 최신 요청의 loading을 지우면 안 됩니다.
{
  const { loader, pending } = harness();
  const first = loader.load("old");
  const second = loader.load("new");
  pending.get("old").reject(new Error("늦은 오류"));
  await first;
  assert.deepEqual(loader.getState(), { status: "loading", key: "new" });
  loader.cancel();
  assert.equal(pending.get("new").signal.aborted, true);
  pending.get("new").resolve([]);
  await second;
  assert.deepEqual(loader.getState(), { status: "idle" });
  passed++;
}
// 실제 최신 오류, 빈 결과, 동일 key 연속 호출을 확인합니다.
{
  const { loader, pending } = harness();
  const failed = loader.load("bad");
  pending.get("bad").reject(new Error("실패"));
  await failed;
  assert.equal(loader.getState().error.message, "실패");
  const a = loader.load("same");
  const old = pending.get("same");
  const b = loader.load("same");
  pending.get("same").resolve([]);
  await b;
  old.resolve(["오래된 값"]);
  await a;
  assert.deepEqual(loader.getState().data, []);
  passed++;
}
// dispose 이후 도착한 응답은 무시하고 재사용은 명시적으로 거절합니다.
{
  const { loader, pending } = harness();
  const task = loader.load("pending");
  loader.dispose();
  pending.get("pending").resolve("late");
  await task;
  assert.equal(loader.getState().status, "idle");
  await assert.rejects(loader.load("again"), /정리/);
  passed++;
}
// 이미 취소된 signal은 실제 fetch에서도 거절됩니다.
{
  const controller = new AbortController();
  controller.abort();
  await assert.rejects(
    fetchJson("data:application/json,%7B%7D", controller.signal),
    { name: "AbortError" }
  );
  passed++;
}
console.log(`PASS ${passed} scenarios`);

두 파일을 같은 폴더에 저장한 뒤 node js-latest.test.mjs를 실행합니다. 기대 결과는 PASS 5 scenarios이며 assertion 하나라도 실패하면 프로세스가 오류로 끝납니다. 네트워크 속도나 외부 서버 응답에 의존하지 않습니다. 마지막 fetch는 data URL과 미리 취소된 signal을 사용하므로 외부 요청도 보내지 않습니다.

경계값과 적용 한계

이 구조는 한 슬롯에 최신 결과 하나를 보여주는 검색이나 상세 조회에 맞습니다. 여러 페이지를 누적하는 무한 스크롤이나 여러 파일 업로드처럼 모든 결과를 보존해야 하는 작업에 그대로 적용하면 필요한 결과를 버립니다. 그런 경우에는 키별 loader, 큐, 동시성 제한 등 결과를 보존하는 별도 정책이 필요합니다. 또한 서버에서 이미 수행한 쓰기 작업은 클라이언트가 취소해도 되돌아가지 않습니다.

request 함수가 signal을 무시하고 영원히 끝나지 않으면 화면 상태는 정리해도 해당 Promise의 이행까지 보장하지 못합니다. 이 구현은 제한 시간 기능을 제공하지 않습니다. 실제 제품에서는 요청 계층에 제한 시간을 적용하고 시간 초과를 오류로 표현할지 결정해야 합니다. fetch의 HTTP 오류 판정과 본문 읽기는 Fetch 표준, Node에서 사용하는 signal API는 Node.js AbortController 문서를 참고하세요.

완료 기준과 연습 과제

완료 기준은 본문의 다섯 시나리오와 ZIP의 확장 세 시나리오가 통과하고, ticket 검사를 success·catch·finally에서 각각 왜 수행하는지 설명하는 것입니다. success 또는 catch의 조기 return 조건문 전체를 한 군데씩 제거한 별도 실습본을 만들어 어떤 assertion이 실패하는지 확인하세요. 특히 finally 검사 제거 후에는 두 번째 시나리오의 최신 signal 취소 검사가 실패해야 합니다.

다음 과제는 최신 요청 실패 뒤 이전 성공 데이터를 유지하는 정책입니다. loading과 error 상태에 previousData를 추가하되, 취소한 과거 요청이 보관 데이터를 바꾸지 못해야 합니다. 과제의 통과 조건은 “첫 성공 → 새 로딩 → 새 실패”에서 첫 데이터가 유지되고, 그보다 오래된 요청의 성공은 끝까지 무시되는 것입니다. 정책 변경 전후 테스트를 분리해 상태 계약을 비교해 보세요.

출처 확인일: 2026-09-10. 위 설계와 테스트 시나리오는 이 실습을 위해 작성한 예제이며 표준 API의 동작 근거는 본문에 연결한 공식 문서입니다.