Frontend Academy · Ders

Temizleme için AbortController

Bir AbortController oluşturun, sinyalini fetch'e aktarın ve bağlanmamış bileşenlerde durum güncellemelerini önlemek için devam eden istekleri temizleme işlevinde iptal edin.

Temizleme için AbortController, CoddyKit'te ücretsiz bir Frontend Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Frontend Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Frontend Academy kursu toplamda 4 dersten oluşur.

Veri alma istekleri neden iptal edilmeli?

Bir bileşen kaldırıldığında veya yeniden veri aldığında, önceki istek hâlâ sürüyor olabilir. Bu istek yeni istekten sonra sonuçlanırsa güncel olmayan veri, güncel verinin üzerine yazılır. AbortController, sürmekte olan istekleri temiz biçimde iptal eder.

AbortController temelleri

Bir AbortController oluşturun, signal değerini fetch'e aktarın ve iptal etmek için controller.abort() çağrısını yapın. İptal edildiğinde fetch bir AbortError fırlatır.

const controller = new AbortController();

try {
  const res = await fetch('/api/data', { signal: controller.signal });
  const data = await res.json();
  setData(data);
} catch (err) {
  if (err instanceof DOMException && err.name === 'AbortError') {
    console.log('Request was cancelled');
  } else {
    setError((err as Error).message);
  }
}

// To cancel:
controller.abort();

useEffect temizlemesinde

Etkinin başlangıcında bir AbortController oluşturun ve temizleme işlevinde abort() çağrısını yapın. Bu, bağımlılıklar değiştiğinde veya bileşen kaldırıldığında isteği otomatik olarak iptal eder.

useEffect(() => {
  const controller = new AbortController();

  async function load() {
    try {
      const res = await fetch(`/api/user/${userId}`, { signal: controller.signal });
      if (!res.ok) throw new Error(`${res.status}`);
      setUser(await res.json());
    } catch (err) {
      if ((err as DOMException).name !== 'AbortError') {
        setError((err as Error).message);
      }
    }
  }

  load();
  return () => controller.abort();
}, [userId]);

AbortError ve ağ hatası karşılaştırması

İptal edilen bir istek, adı 'AbortError' olan bir DOMException fırlatır. Her zaman bunu özel olarak kontrol edin ve kullanıcıya görünen bir hata olarak göstermeyin; bu, beklenen bir temizleme davranışıdır.

signal.aborted özelliği

Bir sinyalin iptal edilip edilmediğini kontrol etmek için controller.signal.aborted değerini kontrol edin. Asenkron kodda setState çağrısından önce kontrol etmek için kullanışlıdır.

const data = await fetchData();
if (!controller.signal.aborted) {
  setData(data); // safe to update state
}

Birden çok isteği iptal etme

Tek bir AbortController, aynı sinyali tüm fetch isteklerine aktararak birden çok fetch isteğini iptal edebilir.

const controller = new AbortController();
const { signal } = controller;

await Promise.all([
  fetch('/api/users',    { signal }),
  fetch('/api/products', { signal }),
  fetch('/api/settings', { signal }),
]);

controller.abort(); // cancels all three

AbortController ile Axios

Axios, yapılandırmadaki signal seçeneği aracılığıyla AbortController'ın sinyalini destekler. Sinyal arayüzü fetch ile aynıdır.

const controller = new AbortController();
await axios.get('/api/data', { signal: controller.signal });

// In cleanup:
return () => controller.abort();

React Query bunu otomatik olarak yönetir

TanStack Query (React Query) kullanırken iptal işlemi sizin için yönetilir. React Query, controller'ları dahili olarak oluşturur ve iptal eder. Manuel veri alma desenleri yerine bunu tercih etmenin nedenlerinden biri budur.

AbortController ile timeout

İstek timeout işlemlerini uygulamak için AbortController'ı setTimeout ile birleştirin.

const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), 5000); // 5s timeout

try {
  const data = await fetch(url, { signal: controller.signal });
  // ...
} finally {
  clearTimeout(timeoutId);
}

AbortSignal.timeout() — modern kısa yol

Modern tarayıcılarda AbortSignal.timeout(ms), manuel bir controller gerektirmeden belirtilen sürenin ardından otomatik olarak iptal olan bir sinyal oluşturur.

const res = await fetch('/api/data', {
  signal: AbortSignal.timeout(5000) // 5 second timeout
});

React 18 Strict Mode'da temizleme kritiktir

React 18 Strict Mode, geliştirme sırasında etkileri iki kez bağlar. AbortController temizlemesi olmazsa iki kez veri alma ve kaldırılmış bileşende durum güncelleme uyarıları görebilirsiniz. Temizleme deseni her ikisini de önler.

Kısa kontrol

Bir bileşen yeniden oluşturulduktan sonra güncel olmayan bir ağ yanıtının durumu güncellemesini nasıl önlersiniz?

Özet: AbortController

Her etki için bir AbortController oluşturun. signal değerini fetch/axios'a aktarın. Temizleme işlevinde abort edin. AbortError'ı yok sayın; beklenen bir durumdur. Asenkron kodda setState çağrısından önce signal.aborted değerini kullanın. Tek bir controller birçok isteği iptal edebilir. timeout işlemleri için AbortSignal.timeout() kullanın. React Query bunların tümünü otomatik olarak yönetir.

Sıkça Sorulan Sorular

“Temizleme için AbortController” dersi ücretsiz mi?

Evet — “Temizleme için AbortController” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Frontend Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Frontend Academy kursu toplamda 4 dersten oluşur.

“Temizleme için AbortController” dersinde ne öğreneceğim?

Bir AbortController oluşturun, sinyalini fetch'e aktarın ve bağlanmamış bileşenlerde durum güncellemelerini önlemek için devam eden istekleri temizleme işlevinde iptal edin. Frontend Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Frontend Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Frontend Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.

“Temizleme için AbortController” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Frontend Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Frontend Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

useEffect Temelleri: Bağımlılıklar ve Temizleme
Bağlanırken Veri Getirme
Yüklenme ve Hata Durumlarını Yönetme
Temizleme için AbortController

← Frontend Academy Sayfasına Dön