const c = new AbortController()
const resP = fetch('/api/data', { signal: c.signal })
// sau đó...
c.abort('người dùng đã điều hướng đi')
try { await resP } catch (e) { if (e.name === 'AbortError') /* bỏ qua */ }

const c = new AbortController()
const { signal } = c

signal.aborted        // boolean
signal.reason         // any (lý do tại sao nó bị hủy bỏ)

c.abort(new DOMException('Timeout', 'AbortError'))
// hoặc: c.abort('Người dùng rời khỏi trang')

// Trình duyệt hiện đại & Node 18+
const res = await fetch('/slow', { signal: AbortSignal.timeout(3000) })

const c = new AbortController()
const id = setTimeout(() => c.abort(new DOMException('Timeout', 'AbortError')), 3000)
try {
  const res = await fetch('/slow', { signal: c.signal })
  // sử dụng res
} catch (e) {
  if (e.name !== 'AbortError') throw e
} finally {
  clearTimeout(id)
}

// người thắng sẽ nhận tất cả -> hủy bỏ những người thua
const controllers = [new AbortController(), new AbortController()]
const [a, b] = controllers.map(c => fetch('/mirror', { signal: c.signal }))
const winner = await Promise.any([a, b])
controllers.forEach(c => c.abort('thua cuộc đua'))

export function wait(ms, signal) {
  return new Promise((resolve, reject) => {
    const id = setTimeout(resolve, ms)
    const onAbort = () => { clearTimeout(id); reject(new DOMException('Aborted', 'AbortError')) }
    if (signal.aborted) return onAbort()
    signal.addEventListener('abort', onAbort, { once: true })
  })
}

const onAbort = () => reject(signal.reason ?? new DOMException('Aborted', 'AbortError'))

const c = new AbortController()
const res = await fetch('/stream', { signal: c.signal }) // có thể bị hủy bỏ
const reader = res.body.getReader({ signal: c.signal })   // hủy bỏ ảnh hưởng đến việc đọc

// sau đó
c.abort()

useEffect(() => {
  const c = new AbortController()
  ;(async () => {
    try {
      const r = await fetch('/api/search?q=' + q, { signal: c.signal })
      setData(await r.json())
    } catch (e) {
      if (e.name !== 'AbortError') console.error(e)
    }
  })()
  return () => c.abort('component đã unmounted hoặc q đã thay đổi')
}, [q])

const ref = useRef<AbortController | null>(null)
async function onType(v: string) {
  ref.current?.abort('superseded')
  const c = new AbortController()
  ref.current = c
  try {
    const r = await fetch('/api?q=' + v, { signal: c.signal })
    setOptions(await r.json())
  } catch (e) { if (e.name !== 'AbortError') console.error(e) }
}

// tạo một controller tự động hủy sau ms
export const withTimeout = (ms = 5000) => AbortSignal.timeout(ms)

// kết hợp nhiều tín hiệu -> bị hủy nếu BẤT KỲ cái nào bị hủy
export function anySignal(...signals) {
  const c = new AbortController()
  const onAbort = (s) => c.abort(s.reason ?? new DOMException('Aborted', 'AbortError'))
  signals.forEach(s => s.addEventListener('abort', () => onAbort(s), { once: true }))
  return c.signal
}

const c = new AbortController()
const s = anySignal(c.signal, AbortSignal.timeout(3000))
fetch('/x', { signal: s })