Axios İpuçları #2: Interceptor Kullanarak HTTP İstek ve Yanıtlarını Yönetmek
Axios serisindeki bir önceki yazı: Axios İpuçları #1: Cancel Token ile HTTP İsteklerini İptal Etmek
Bir önceki yazıda, Axios ile HTTP isteklerini iptal etmekten bahsetmiştim. Bu yazıda ise Axios ile yapılan HTTP isteklerininin (request) ve bu isteklere alınan yanıtların (response) merkezi bir yerden nasıl yönetilebileceğinden bahsedeceğim. Axios ile ilgili gündelik hayat senaryolarına dair kullanım ipuçlarını ufak bir seri hâlinde devam ettirmek niyetindeyim.
Motivasyon
Geliştirdiğimiz uygulamalar içerisinde yaptığımız HTTP isteklerine kimi zaman tüm uygulama genelinde geçerli olacak tanımlamalar yapmamız gerekebiliyor. Örneğin API yetkilendirmeleri (authorization) için access token kullanıyor olabiliriz. Bu durumda API’ın bizi tanıyabilmesi için uygulama içerisinde API’a seslenilen her HTTP isteğine elimizdeki token’ı bir Authorization başlığıyla (header) iliştirmemiz gerekiyor. Benzer şekilde HTTP yanıtlarında da global tanımlamalar yapmamız gerekebiliyor. Örneğin, yetkisiz bir kullanıcı API’a seslendiğinde ona gösterilecek uyarıları ve akabinde yapılacak yönlendirmeleri tek tek her istek içerisinde ele almak hem büyük bir efor gerektiriyor hem de sıklıkla hataya mahal veriyor.
Başlangıçta yalnızca birkaç sayfadan mürekkep olan projelerin dahi zamanla kaçınılmaz olarak genişlediğini düşünürsek örneklerde saydığım tanımlamaları merkezi bir yerden ele almak, temiz ve daha sonra müdahale etmesi kolay bir mimari kurmamıza önayak oluyor.
Interceptor
Axios içerisinde bu işi yapan araca Interceptor (önleyici) ismi veriliyor. Axios’un küçücük kütüphanesi içerisinde tümleşik olarak geliyor, ekstra bir kurulum gerektirmiyor.
Interceptor’ler kimi zaman kullanım benzerliğinden ötürü varsayılan başlık (header) tanımlamalarıyla karıştırılabiliyorlar. Fakat isminden de anlaşılacağı üzere, interceptor’ler, giden istekleri ve dönen yanıtları uygulama içerisinde ele alınmadan evvel durdurup gerekli müdaheleleri yaptıktan sonra uygulamanın doğal akışında hayatına devam etmesini sağlıyorlar.
Üstteki örnek üzerinden detaylandırmak gerekirse, elimizdeki access token’ı HTTP isteğine varsayılan bir başlık olarak tanımlarsak HTTP istemcisi uygulamayla birlikte ayağa kalkarken bu token’ı gösterdiğimiz konumda arayacaktır. Fakat token, uygulama ayağa kalktıktan sonra asenkron olarak farklı bir kaynaktan alınabilir. Bu durumda varsayılan başlık tanımlamamız aradığı token’ı hiçbir zaman yerinde bulamayacak, interceptor gibi isteği yapıldığı/yanıtı alındığı anda yakalayıp gerekli operasyonları yürüten bir çözüme ihtiyacımız olacaktır.
Nasıl?
Kullanımı oldukça pratik. Girişte bahsettiğim istek ve yanıt örneklerini ete kemiğe büründürelim o hâlde. Axios’un proje içerisinde kurulu olduğunu varsayıyorum.
Aşağıdaki gibi bir tanımlamayla Axios ile yapılacak tüm HTTP isteklerine elimizdeki token’ı Authorization başlığıyla iliştirmiş oluyoruz. Interceptor olmasaydı bu işlemin alternatifi, uygulama içerisindeki tüm istekleri bulup tek tek başlık tanımlamak olacaktı.
Benzer şekilde yanıt örneği de aşağıdaki gibi global olarak ele alınabilmekte. Interceptor, Axios ile yapılan isteklere gelen tüm yanıtları yakalayıp HTTP durum kodu 401 Unauthorized olanları giriş sayfasına yönlendirecektir. Yine interceptor olmasaydı bu kullanımın da alternatifi, uygulama içerisindeki tüm yanıtlar için ilgili promise’in catch bloğu içerisinde yönlendirmeleri tek tek tanımlamak olacaktı.
Sorun: Birden Fazla API ile Çalışmak
Buraya kadar her şey güzel gibi gözükse de gerçek hayat senaryolarında işler biraz değişebiliyor. Üstteki örneklerde Axios’u projeye dahil ettik ve onunla yapılan tüm istekler ve yanıtlar için birtakım tanımlamalar yaptık. Fakat bu tanımlaların tüm istek ve yanıtlara uygulanmasını istemeyeceğimiz durumlar sıklıkla karşımıza çıkabiliyor.
Bir proje içerisinde biri Go ile öteki Node.js ile yazılmış iki farklı API ile konuştuğumuzu düşünelim. Bu iki API’ın URL’lerinden yetkilendirmelerine kadar tüm ihtiyaçları birbirinden farklı olabilir. Bu durumda her iki API’ı tanımlalarını farklı ele almak gerekiyor.
Çözüm: Instance Yaratmak
Bunu da yine Axios’un instance yaratma özelliğiyle yapabilmek mümkün. İki farklı kaynak oluşturup yapacağımız tanımlaların o kaynaklara yapılan istek ve alınan yanıtlara özgü olmasını sağlayabiliyoruz.
Aşağıdaki örnekte fooBarAPI’ına yapılan istekler farklı, fooBazAPI’ına yapılan istekler farklı şekilde ele alınmış olacaktır.
Sonuç
Interceptor’ler Axios ile kullanmayı en sevdiğim özelliklerden birisi. Hatta bu gibi mukayeselerde tercihim ekseriyetle native çözümler olsa da fetch yerine Axios’u tercih etmeme neden olan en büyük etkendir aynı zamanda. Hakkında pek Türkçe kaynağa rastlamadığım için üstüne birkaç şey yazmak istedim.
Sonraki yazılarda görüşmek üzere.
Kaynaklar
Axios serisindeki bir sonraki yazı: Axios İpuçları #3: LRU Cache ile HTTP Yanıtlarını Önbelleklemek
