Axios interceptor, HTTP istek ve yanıtlarını merkezi bir noktada ele almanızı sağlar. Bu sayede her API çağrısında aynı hata yönetimi kodunu tekrar yazmak zorunda kalmazsınız. Otomatik retry, token yenileme ve kullanıcıya anlamlı geri bildirim vermek için interceptor kullanımı, uygulamanızın güvenilirliğini artırır. İşte bu yaklaşımı hayata geçirmek için pratik ipuçları ve kontrol listesi.
Interceptor Kurulumu: Adım Adım
Axios interceptor eklemek için aşağıdaki adımları izleyin. Bu yapı, tüm istek ve yanıtlar için geçerli olur.
- İstek Interceptor'ı Oluşturma: Her istek öncesi token ekleme, başlıkları düzenleme gibi işlemleri yapın.
- Yanıt Interceptor'ı Oluşturma: Yanıt geldikten sonra hata kodlarını kontrol edin ve retry mantığını burada tetikleyin.
- Hata Durumunda Retry: Belirli hatalar (örn. 500, 502, 503) için otomatik olarak isteği yeniden deneyin.
- Token Yenileme: 401 hatası alındığında refresh token ile yeni access token almak için retry zinciri oluşturun.
Retry Stratejileri: Hangi Durumda Kaç Kez Denemeli?
Retry sayısı ve bekleme süresi, hizmetin yapısına göre değişir. Aşağıdaki tablo yaygın stratejileri özetler.
| Hata Türü | Retry Sayısı | Bekleme Süresi |
|---|---|---|
| 500 Internal Server Error | 3 | 1 sn, 2 sn, 4 sn (exponential backoff) |
| 502 Bad Gateway | 2 | 2 sn, 4 sn |
| 503 Service Unavailable | 3 | 1 sn, 3 sn, 9 sn |
| 401 Unauthorized | 1 (yenileme) | Hemen |
Kontrol Listesi: Axios Interceptor ile Hata Yönetimi
Aşağıdaki maddeleri projenize entegre ederek sağlam bir hata yönetimi altyapısı kurabilirsiniz.
- İstek interceptor'ında token varsa
Authorizationbaşlığını ekleyin. - Yanıt interceptor'ında hata kodunu kontrol edin:
error.response.status. - Retry mantığı için özel bir sayaç (
retryCount) tutun. - Retry denemelerinde exponential backoff uygulayın.
- 401 hatasında token yenileme isteği gönderin ve başarısız olan isteği yeni token ile tekrarlayın.
- Maksimum retry sayısı aşıldığında kullanıcıya uygun bir hata mesajı gösterin.
- Retry edilemeyecek hataları (4xx istemci hataları) doğrudan kullanıcıya iletin.
- Interceptor içinde sonsuz döngüye girmemek için retry sayısını sınırlayın.
- AbortController ile iptal edilen istekleri retry etmeyin. Daha fazla bilgi için Web Geliştirmede AbortController ile İptal Edilebilir API İstekleri yazısına göz atın.
- İstek ve yanıt interceptor'larını ayrı ayrı test edin.
Sık Yapılan Hatalar ve Çözümleri
Interceptor kullanırken karşılaşabileceğiniz yaygın sorunlar ve bunlardan kaçınma yolları:
- Sonsuz Retry Döngüsü: Retry sayısını mutlaka sınırlayın. Aksi halde token yenileme başarısız olursa istek sürekli tekrarlanır.
- Token Yenileme Sırasında Yarış Koşulu: Aynı anda birden fazla 401 isteği gelirse, token yenileme isteğini kilitleyerek (
isRefreshingflag) tek bir yenileme yapın. - İptal Edilen İstekleri Retry Etmek: Kullanıcı sayfadan ayrıldığında iptal edilen istekleri retry etmeyin.
axios.Cancelhatasını yakalayın ve retry mantığını atlayın. - Hata Mesajlarını Gizlemek: Retry sonrası hata alınırsa kullanıcıya anlamlı bir mesaj gösterin. Sadece konsola log atmayın.
İleri Düzey: Interceptor ile Otomatik Token Yenileme
401 hatası alındığında refresh token API'sine istek atıp yeni token alabilir ve başarısız isteği otomatik olarak tekrarlayabilirsiniz. İşte adımlar:
- Yanıt interceptor'ında 401 hatasını yakalayın.
- Token yenileme isteği daha önce başlatılmamışsa başlatın ve bekleyen istekleri bir kuyruğa alın.
- Yeni token alındığında kuyruktaki tüm istekleri yeni token ile tekrarlayın.
- Token yenileme başarısız olursa kullanıcıyı oturum sayfasına yönlendirin.
Bu desen, özellikle kimlik doğrulama gerektiren uygulamalarda kullanıcı deneyimini büyük ölçüde iyileştirir. Daha fazla bilgi için Axios vs Fetch API karşılaştırmamızı da inceleyebilirsiniz.
Performans İpuçları
- Retry bekleme sürelerini exponential backoff ile artırın. Bu, sunucu üzerindeki yükü azaltır.
- Retry edilecek istekleri belirli bir zaman aşımına (timeout) tabi tutun.
- Interceptor içinde ağır işlemler (örneğin büyük veri dönüşümü) yapmaktan kaçının.
- Token yenileme isteğini önbelleğe alarak aynı anda gelen 401 isteklerinde tekrar tekrar yenileme yapılmasını engelleyin.
Bu pratik ipuçları ve kontrol listesi ile Axios interceptor kullanarak HTTP hatalarını merkezi ve etkili bir şekilde yönetebilirsiniz. Uygulamanızın hata toleransını artırmak ve kullanıcı deneyimini iyileştirmek için bu stratejileri projenize entegre edin. Retry mekanizmalarını dikkatli tasarlayarak aşırı yüklenmeyi önleyin ve her zaman geri bildirim sağlayın.
Sık Sorulan Sorular
Axios interceptor nedir ve ne işe yarar?
Axios interceptor, HTTP istekleri ve yanıtları üzerinde merkezi işlemler yapmanızı sağlayan bir ara katmandır. Token ekleme, hata yönetimi ve otomatik retry gibi işlemleri tek bir noktadan yönetebilirsiniz.
Retry işlemi için kaç kez deneme yapmalıyım?
Genellikle 2-3 deneme yeterlidir. Sunucu yüküne ve hata türüne göre değişebilir. Exponential backoff kullanarak denemeler arasındaki bekleme süresini artırmanız önerilir.
Token yenileme işlemi için interceptor nasıl yapılandırılır?
Yanıt interceptor'ında 401 hatasını yakalayın, bir kilitleme mekanizması ile token yenileme isteği gönderin, yeni token alındığında bekleyen istekleri tekrarlayın. Başarısız olursa kullanıcıyı oturum dışına yönlendirin.
Interceptor içinde sonsuz döngü nasıl engellenir?
Retry sayısını sınırlayan bir sayaç kullanın. Maksimum deneme sayısına ulaşıldığında retry'i durdurun ve hata yönetimini üst katmana bırakın.
AbortController ile iptal edilen istekleri retry etmeli miyim?
Hayır. İptal edilen istekleri retry etmeyin. axios.Cancel hatasını yakalayarak retry mantığını atlayın, çünkü bu istekler kullanıcı tarafından iptal edilmiştir.
