AbortController nedir? fetch isteklerini iptal etmek ve race condition'ları önlemek için nasıl kullanılır?

AbortController, bir signal üreten ve abort() çağrıldığında bu sinyali dinleyen işlemleri iptal eden standart bir Web API'dir. fetch, addEventListener ve birçok Node/tarayıcı API'si signal kabul eder.

const controller = new AbortController();

fetch("/api/report", { signal: controller.signal })
  .then((r) => r.json())
  .then(console.log)
  .catch((err) => {
    if (err.name === "AbortError") return; // iptal: hata gösterme
    console.error(err);
  });

controller.abort(); // istek iptal edilir

Race condition örneği

Kullanıcı hızlıca A, sonra B profiline geçer; A'nın cevabı daha geç gelirse ekranda yanlış veri görünür. Her yeni istekte bir öncekini iptal etmek bunu çözer:

useEffect(() => {
  const controller = new AbortController();
  fetch(`/api/users/${userId}`, { signal: controller.signal })
    .then((r) => r.json())
    .then(setUser)
    .catch((e) => e.name !== "AbortError" && setError(e));
  return () => controller.abort(); // userId değişince veya unmount'ta
}, [userId]);

Faydalı yardımcılar

// Zaman aşımı
fetch(url, { signal: AbortSignal.timeout(5000) }); // 5 sn sonra TimeoutError

// Birden fazla sinyali birleştirme
const signal = AbortSignal.any([controller.signal, AbortSignal.timeout(5000)]);

// Event listener'ları topluca kaldırma
window.addEventListener("resize", onResize, { signal: controller.signal });

Not: İptal, istemci tarafında cevabı yok sayar ve bağlantıyı keser; sunucu işlemi zaten başlatmışsa tamamlayabilir. Sunucu tarafı işlemler için idempotency önemlidir.