Photo by set.sj on Unsplash

React Network

Axios Interceptor Kullanım Alanları

Bu yazıda HTTP Request response için sıkça kullanılan Axios kütüphanesinin Interceptor özelliğinden bahsedeceğim.

Onur Dayıbaşı
Frontend Development With JS
2 min readApr 30, 2022

--

Axios JS Client kütüphanesi sizin web uygulamanız ile sunucu arasında HTTP Requestleri yapmanızı sağlayan bir katman, tabi bunların çoğu mevcut Fetch API içerisinde gelmeye başlasada, bir çok web uygulama geliştiricisi axios kullanmaya devam ediyor.

Axios Web sayfasından özelliklerini incelersek, aşağıdaki özellikleri görebilirsiniz.

  • Make XMLHttpRequests from the browser
  • Make http requests from node.js
  • Supports the Promise API
  • Intercept request and response
  • Transform request and response data
  • Cancel requests
  • Automatic transforms for JSON data
  • Client side support for protecting against XSRF

Bu yazıda ilgilendiğimiz konu Intercept Request, Response yani istek atıldığında tüm istekleri ve gelen cevapları tek bir yerden kontrol edebilmek.

https://axios-http.com/docs/interceptors

Peki bu kod parçalarının içerisine nasıl bir iş kodu yazma ihtiyacı duyabiliriz ? Yani

  • Gönderirken isteği değiştirmek veya isteğin içerisindeki bir takım bilgilere göre ekstra işler yapmak
  • Gelen cevabı değiştirmek ve gelen cevaba göre eskstra işler yapmak.

Gelin bu konuları biraz açalım.

Kullanım Senaryoları

Bazen yazılım geliştirme sırasında şu şekilde istekler geliyor;

  • Tüm request/response loglayalım.
  • Belli özelliklerdeki request/response header içerisine özel token veya key ve bilgiler atansın
  • Gelen verinin bazı alanları encrpyted bunlar önce çözümlenme modülüne gönderilsin ve dönüşte decrypt edilmiş şekilde asol mesaja ulaşabilelim.
  • Her hangi bazı hatalarda Web uygulamasına girmeden sayfayı ilgili başka sayfaya yönlendirsin veya buna karşı önlemler alınsın.

Özetle bu kullanım senaryolarını ihtiyaçlarınız doğrultusunda arttırabilirsiniz. Aşağıdaki örnekte olduğu gibi biz bunu bu ortak mantığı koymazsak her türlü ilgili isteğe tek tek bu logicleri el ile eklememiz gerekir.

Buda kodu oldukça dağınık ve okunmaz hale getirir.

Okumaya Devam Et 😃

Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.

--

--