Axios İpuçları #1: Cancel Token ile HTTP İsteklerini İptal Etmek
Axios v0.22.0 sürümünden itibaren Cancel Token yerine Abort Controller kullanılıyor.
Motivasyon
Normal şatlarda bir uygulama geliştirirken API’lerle olan iletişimimizde istek (request) — yanıt (response) döngüsü ile çalışıyoruz. En basit anlamda bir HTTP isteği yapıyoruz ve yaptığımız isteğe kaynaktan bir yanıt alıyoruz. Aldığımız yanıtın durumuna göre de birtakım işlemler yapıyoruz. Bu işlemler kimi zaman bir hata veya uyarı mesajını kullanıcıya göstermek olurken kimi zaman da başarılı bir işlem sonrasında kullanıcıyı farklı bir arayüze yönlendirmek olabiliyor.
Döngüyü Kırmak
Fakat bazı kullanım senaryolarında bu döngüyü kırmak zorunda kalıyor ve kullanıcının yaptığı istek tamamlanmadan, yani sunucuya ulaşmadan iptal etmek durumunda kalabiliyoruz. Bu iptal kararının tasarrufu ekseriyetle yine isteği yapan kullanıcıda oluyor. Uzun zaman alma ihtimali olan dosya (doküman, görsel, video vb.) yükleme işlemleri en yaygın kullanım senaryosu olarak örnek verilebilir.
Axios Cancel Token
Cancel Token, Axios’un varsayılan kütüphanesinin içerisinde yerleşik olarak gelen ve HTTP isteklerini iptal etmemize imkân sağlayan bir özellik. Kullanabilmek için herhangi bir ek kuruluma ihtiyaç duyulmuyor.
Aşağıdaki gibi bir senaryomuz olduğunu düşünelim. Bir video paylaşım sitemiz olsun. Kullanıcılar kendi videolarını /my-videos isimli bir API ucunu kullanarak bu siteye yüklesinler. Fakat yükleme esnasında muhtelif sebeplerden ötürü vazgeçmek isteyen kullanıcılar için de yüklemeyi durdurma seçeneğimiz olsun.
HTTP isteğimizi aşağıdaki şekilde yapılandırmamız gerekiyor.
İlk olarak bir Cancel Token kaynağı oluşturduk. Bu kaynaktan elde ettiğimiz token verisini iptal etmek isteyebileceğimiz HTTP isteklerine cancelToken parametresiyle iliştirdik. Her istek için yeni bir kaynak oluşturabileceğimiz gibi benzer bağlamdaki tüm istekler için aynı kaynağı kullanabilmemiz de mümkün.
Daha sonra uygulamanın herhangi bir yerinden yukarıda oluşturduğumuz kaynaktan üretilen token verilerinin yer aldığı istekleri cancel metoduyla iptal ettik. Bizim örneğimiz için bu bir butonun tıklanma olayı oldu. İsteği iptal ederken iptale dair bir mesaj da yazdık.
HTTP isteğinin iptal edilmesinden sonra uygulama arayüzünün nasıl davranacağına, hangi uyarı mesajlarının son kullanıcıya nasıl gösterileceğine dair tanımlamaları, yaptığımız HTTP istek promise’inin catch bloğunda yakalayabiliyoruz. isCancel metodu yardımıyla catch içerisinde yakaladığımız hatanın bir istek iptalinden mi yoksa HTTP yanıtından mı kaynaklandığını kolayca anlayabiliyoruz. Bu sayede iptallerden doğan hataları özel olarak işleyebilmemiz mümkün oluyor.
Sonuç
HTTP isteklerini iptal etmek, kullanım senaryoları gereği nadir bir ihtiyaç gibi görülebilir elbette. Benim de gündelik çalıştığım projelerde her gün ihtiyacım olmamakla birlikte özellikle stream ve upload servislerinde daha iyi kullanıcı deneyimi için sağlamak için sıklıkla başvurulan bir pratik.
Kaynaklar
- https://axios-http.com/docs/cancellation
- https://www.pluralsight.com/guides/all-need-to-know-about-axios
Axios serisindeki bir sonraki yazı: Axios İpuçları #2: Interceptor Kullanarak HTTP İstek ve Yanıtlarını Yönetmek
