Web uygulamalarında kullanıcı bir sayfadan ayrıldığında veya arama filtresini hızla değiştirdiğinde, devam eden API istekleri gereksiz yere kaynak tüketir ve hata mesajlarına yol açabilir. AbortController, bu istekleri iptal ederek hem performansı artırır hem de kullanıcı deneyimini iyileştirir. İşte pratik ipuçları ve kontrol listesi ile AbortController kullanımı.
AbortController Nedir ve Neden Kullanılır?
AbortController, DOM standardının bir parçasıdır ve web tarayıcılarında fetch API'si ile birlikte kullanılmak üzere tasarlanmıştır. Bir isteği iptal etmenize olanak tanır. Özellikle React, Vue veya diğer SPA çerçevelerinde kullanıcı etkileşimleri sık sık state değiştirir; bu da eski isteklerin geçersiz kalmasına neden olur. AbortController olmadan bu istekler tamamlanır, cevap geldiğinde state güncellenir ve bu da yarış koşullarına (race condition) yol açabilir.
Temel Kullanım: AbortController ile Fetch
Bir AbortController örneği oluşturun ve signal özelliğini fetch isteğine iletin. İsteği iptal etmek için abort() metodunu çağırın.
const controller = new AbortController();
const signal = controller.signal;
fetch('/api/data', { signal })
.then(response => response.json())
.catch(err => {
if (err.name === 'AbortError') {
console.log('İstek iptal edildi');
} else {
console.error('Hata:', err);
}
});
// İsteği iptal et
controller.abort();
Önemli: İptal edilen bir isteğin promise'i bir AbortError ile reject olur. Bunu her zaman yakalayın ve işleyin.
React ile AbortController Entegrasyonu
React bileşenlerinde, useEffect temizleme fonksiyonunda istekleri iptal etmek yaygın bir desendir. Böylece bileşen unmount olduğunda veya bağımlılıklar değiştiğinde eski istekler iptal edilir.
Örnek: Kullanıcı Listesi Bileşeni
- Bir state değişkeni (örn.
userId) her değiştiğinde yeni fetch yapın. - Bir önceki isteği iptal etmek için AbortController kullanın.
- Bileşen unmount olduğunda da isteği iptal edin.
import { useState, useEffect } from 'react';
function UserProfile({ userId }) {
const [user, setUser] = useState(null);
const [loading, setLoading] = useState(false);
useEffect(() => {
const controller = new AbortController();
const signal = controller.signal;
setLoading(true);
fetch(`/api/users/${userId}`, { signal })
.then(res => res.json())
.then(data => {
setUser(data);
setLoading(false);
})
.catch(err => {
if (err.name !== 'AbortError') {
console.error('Fetch hatası:', err);
setLoading(false);
}
});
// Temizleme fonksiyonu: yeni userId veya unmount durumunda isteği iptal et
return () => controller.abort();
}, [userId]);
if (loading) return <div>Yükleniyor...</div>
return <div>{user.name}</div>
}
Bu yöntem, özellikle otomatik tamamlama veya arama kutularında hızlı yazma durumlarında gereksiz ağ trafiğini engeller ve kullanıcının en son gördüğü verinin güncel olmasını sağlar.
Pratik İpuçları ve Kontrol Listesi
Aşağıdaki kontrol listesini projelerinizde uygulayarak AbortController'dan en iyi şekilde yararlanın:
- Her istek için yeni bir AbortController oluşturun: Aynı controller'ı birden fazla istekte kullanmayın; her biri bağımsız olmalıdır.
- Hata yakalamayı unutmayın:
AbortErrordışındaki hataları kullanıcıya gösterin, abort hatalarını sessizce yok sayın veya loglayın. - Axios ile de kullanabilirsiniz: Axios,
CancelTokenile benzer işlevsellik sunar, ancak AbortController daha modern ve tarayıcı standardıdır. Eğer Axios kullanıyorsanız,signalözelliğini destekleyen sürüme geçin (Axios v0.22.0+). - Zaman aşımı (timeout) ekleyin:
signalile birlikte setTimeout kullanarak isteği belirli süre sonra iptal edebilirsiniz. Örneğin, 10 saniye sonra abort çağırın. - İptal durumunu UI'da yansıtın: Eğer bir istek iptal edildiyse, kullanıcıya yanıltıcı bir hata mesajı göstermeyin; yükleniyor durumunu kaldırın.
- Test edin: Birim testlerde isteğin iptal edildiğini doğrulamak için
jest-fetch-mockgibi kütüphanelerle AbortController'ı mocklayın.
Sık Yapılan Hatalar ve Dikkat Edilmesi Gerekenler
- AbortError'ı yakalamamak: İptal edilen bir isteğin promise'i reject olur, eğer catch yoksa veya yanlış işlenirse kontrolsüz hatalara yol açar. Her zaman catch bloğunda abort hatasını ayırt edin.
- Aynı controller'ı birden fazla kez kullanmak:
abort()çağrıldıktan sonra controller tekrar kullanılamaz; yeni istek için yeni bir controller oluşturmalısınız. - Unmount sırasında state güncellemeye çalışmak: Bileşen unmount olduktan sonra isteğin cevabı gelirse state güncellemek hafıza sızıntısına ve uyarılara neden olur. AbortController ile isteği iptal ederek bu durumu önleyin.
- Async/await ile çalışırken dikkat: Eğer async fonksiyon içinde abort sonrası işlem yapıyorsanız, try/catch ile hatayı yakalayın. Aksi takdirde iptal edilen isteğin hatası yakalanmayabilir.
Diğer API İstek Yönetimi Stratejileri ile Entegrasyon
AbortController, API rate limiting ve hata yönetimi stratejileriyle birlikte kullanılabilir. Örneğin, bir istek iptal edildiğinde yeniden deneme (retry) mantığı uygulamak genellikle anlamsızdır, ancak isteği daha sonra yeniden başlatmak için queue mekanizması oluşturabilirsiniz. API Rate Limit Yönetiminde Make ve n8n Karşılaştırması yazımızda retry ve throttle stratejilerini detaylandırdık. Benzer şekilde, REST API Rate Limiting rehberimiz ile de iptal edilen isteklerin rate limit üzerindeki etkisini azaltabilirsiniz.
Ayrıca, webhook tabanlı sistemlerde AbortController kullanımı daha farklıdır; webhook'lar genellikle sunucudan gelen istekler olduğu için istemci tarafında iptal edilmezler. Ancak polling benzeri durumlarda kullanılabilir. Webhook Entegrasyonu rehberimizde bu konuyu ele aldık.
Sonuç
AbortController, web uygulamalarında API isteklerini yönetmek için basit ama güçlü bir araçtır. Özellikle hızlı kullanıcı etkileşimlerinin olduğu arama, filtreleme ve sayfalama gibi senaryolarda performansı artırır ve hataları azaltır. Yukarıdaki pratik ipuçları ve kontrol listesini uygulayarak projelerinize hemen entegre edebilirsiniz. Unutmayın: Her istek için yeni bir controller, hataları doğru işleyin ve temizleme fonksiyonlarını kullanın.
Sık Sorulan Sorular
AbortController ile birden fazla isteği aynı anda iptal edebilir miyim?
Evet, aynı controller'ı birden fazla fetch isteğine iletebilirsiniz, ancak bunu yapmak genellikle önerilmez çünkü abort() tüm bu istekleri aynı anda iptal eder. Her isteğin bağımsız olması için her biri için ayrı controller oluşturmak daha iyidir.
Axios ile AbortController kullanabilir miyim?
Evet, Axios sürüm 0.22.0 ve sonrası signal özelliğini destekler. Axios isteğine { signal: controller.signal } ekleyerek kullanabilirsiniz. Eski sürümlerde CancelToken kullanmanız gerekir.
AbortController ile istek iptal edildiğinde error state kaldırılır mı?
İptal edilen bir isteğin promise'i AbortError fırlatır. Eğer catch bloğunda bu hatayı yakalayıp state'i güncellemezseniz, yükleme state'i (örn. loading) temizlenir ancak hata state'i oluşmaz. Genellikle abort durumunda UI'da herhangi bir hata göstermemek en iyisidir.
AbortController performansı nasıl etkiler?
AbortController, gereksiz ağ isteklerini engelleyerek bant genişliği ve işlemci kullanımını azaltır. Yanıtların işlenmesi durduğu için bellek kullanımını da olumlu etkiler. Kullanıcı deneyimini iyileştirir, özellikle hızlı etkileşimlerde yarış koşullarını engeller.
