---
type: snippet
tags: ['abort-controller']
status: release
ctime: 2025-01-12
mtime: 2025-01-12
---

취소 가능한 `fetch` 요청을 생성하는 `createCancelableFetch` 함수 구현

````ts
/**
 * 취소 가능한 fetch 요청
 *
 * @param url - 요청 URL
 * @param options - fetch 옵션
 * @returns {run, cancel} - run: 요청 실행 함수, cancel: 요청 취소 함수
 *
 * @example
 *
 * ```ts
 * const { run, cancel } = createCancelableFetch('/api/data')
 *
 * run()
 *   .then((data) => console.log('Fetched data:', data))
 *   .catch((err) => console.error('Error or canceled:', err))
 *
 * cancel()
 * ```
 */
function createCancelableFetch(url: string, options: RequestInit = {}) {
  const abortController = new AbortController()

  const run = async () => {
    const response = await fetch(url, {
      ...options,
      signal: abortController.signal,
    })

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

    return response.json()
  }

  const cancel = () => abortController.abort()

  return {
    run,
    cancel,
  }
}
````

- `AbortController`를 사용하여 요청을 중단할 수 있는 기능 제공
- `run` 함수로 `fetch` 요청을 실행하고, `cancel` 함수로 요청을 취소할 수 있음
- 요청 실패 시 오류를 처리하고 예외를 발생시킴

---

- [AbortController](https://developer.mozilla.org/en-US/docs/Web/API/AbortController)
- [Don't Sleep on AbortController](https://kettanaito.com/blog/dont-sleep-on-abort-controller)