0Pricing
JavaScript Academy · Ders

AbortController ile İstekleri İptal Etme

Devam eden istekleri düzgün şekilde iptal edin.

AbortController ile İstekleri İptal Etme, CoddyKit'te ücretsiz bir JavaScript 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, JavaScript Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. JavaScript Academy kursu toplamda 4 dersten oluşur.

Bir İstek Neden İptal Edilir

Bazen artık ihtiyacınız olmayan bir isteği başlatırsınız: kullanıcı başka bir sayfaya gider, yeni bir arama yazar veya timeout süresi dolar. AbortController, devam eden bir fetch isteğini iptal etmenizi sağlar.

controller Oluşturma

Bir AbortController oluşturun. Bu nesne, fetch'e aktaracağınız bir signal ve iptal etmek için bir abort() yöntemi sunar.

const controller = new AbortController();
console.log(controller.signal); // an AbortSignal

Sinyali Aktarma

controller sinyalini seçenekler nesnesi üzerinden fetch'e verin. İstek artık iptal edilebilir.

fetch(url, { signal: controller.signal });

abort Çağrısı

İptal etmek için controller.abort() çağrısını yapın. Bekleyen fetch işlemi bir AbortError ile reddedilir.

const controller = new AbortController();
fetch(url, { signal: controller.signal });
controller.abort(); // cancels the request

AbortError'ı Yakalama

catch içinde err.name === "AbortError" denetimini yaparak kasıtlı bir iptali gerçek bir hatadan ayırt edin.

try {
  await fetch(url, { signal: controller.signal });
} catch (err) {
  if (err.name === "AbortError") console.log("Cancelled");
  else throw err;
}

timeout Deseni

Yavaş istekleri otomatik olarak iptal etmek için setTimeout ile birleştirin. İstek önce tamamlanırsa zamanlayıcıyı temizleyin.

const c = new AbortController();
const t = setTimeout(() => c.abort(), 5000);
await fetch(url, { signal: c.signal });
clearTimeout(t);

Yerleşik timeout Yardımcısı

Modern ortamlar, otomatik olarak iptal edilen bir sinyal döndüren AbortSignal.timeout(ms) işlevini sunar. Bu, setTimeout'ı kendiniz kurmaktan daha temizdir.

fetch(url, { signal: AbortSignal.timeout(5000) });

Önceki Aramayı İptal Etme

Yazarken yapılan aramalarda yeni bir istek başlatmadan önce önceki isteği iptal edin. Böylece eski yanıtların güncel sonuçların üzerine yazması önlenir.

let current = null;
function search(q) {
  if (current) current.abort();
  current = new AbortController();
  return fetch("/search?q=" + q, { signal: current.signal });
}

Tek Sinyal, Birden Çok İstek

Tek bir sinyal aynı anda birden çok isteği iptal edebilir. Aynı sinyali birkaç fetch işlemine aktarın; tek bir abort() çağrısı bunların tümünü iptal eder.

const c = new AbortController();
fetch(a, { signal: c.signal });
fetch(b, { signal: c.signal });
c.abort(); // cancels both

Önceden İptal Edilmiş Sinyaller

Bir sinyal fetch'e aktarılırken zaten iptal edilmişse istek hemen reddedilir. Durumunu öğrenmeniz gerekiyorsa signal.aborted değerini denetleyin.

if (controller.signal.aborted) console.log("already cancelled");

Bileşen Kaldırılırken Temizleme

Bileşen tabanlı kullanıcı arayüzlerinde, artık var olmayan bir nesnenin durumunu değiştirmeye çalışmamak için bileşen yok edildiğinde bekleyen istekleri iptal edin.

const controller = new AbortController();
// on teardown:
controller.abort();

Hızlı Kontrol

Fetch isteklerini iptal etme.

Özet

Bir AbortController oluşturun, signal değerini fetch'e aktarın ve iptal etmek için abort() çağrısını yapın. İşlem, adını denetleyerek saptayabileceğiniz bir AbortError ile reddedilir. Bunu timeout işlemleri (AbortSignal.timeout), önceki aramayı iptal etme, birden çok isteği iptal etme ve kaldırma sırasında temizlik için kullanın.

Sıkça Sorulan Sorular

“AbortController ile İstekleri İptal Etme” dersi ücretsiz mi?

Evet — “AbortController ile İstekleri İptal Etme” 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 JavaScript Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. JavaScript Academy kursu toplamda 4 dersten oluşur.

“AbortController ile İstekleri İptal Etme” dersinde ne öğreneceğim?

Devam eden istekleri düzgün şekilde iptal edin. JavaScript 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.

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

Önceden deneyim gerekmez. CoddyKit'te JavaScript 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.

“AbortController ile İstekleri İptal Etme” 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 JavaScript Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her JavaScript 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

  1. GET İstekleri Oluşturma
  2. POST ve Veri Gönderme
  3. Hataları ve Durum Kodlarını Yönetme
  4. AbortController ile İstekleri İptal Etme
← JavaScript Academy Sayfasına Dön