Axios İpuçları #6: HTTP İsteklerinde Upload/Download Bilgilerini Yakalamak
Axios serisindeki bir önceki yazı: Axios İpuçları #5: Axios Mock Adapter ile HTTP İsteklerini Mocklamak
Pandemi döneminde yazmaya başladığım ipucu serilerinden birisi de Axios için olandı. HTTP isteklerini iptal etmek için cancel token kullanımı, interceptor kullanarak HTTP istek ve yanıtlarını yönetmek, LRU yöntemiyle önbellekleme, IndexedDB’de önbellekleme, HTTP isteklerini mocklamak gibi farklı konularda yazılar yazmıştım. Hem Axios’un yeni sürümleriyle birlikte gelen hem de daha önce bahsetmediğim özelliklerle birlikte bu seriye devam etmek niyetindeyim.
Motivasyon
HTTP isteklerini yaparken veya yaptığımız HTTP isteklerinin yanıtlarını beklerken kullanıcılarla farklı yöntemler sayesinde etkileşime geçiyoruz. Bu yöntemler, bazen kullanıcının gördüğü ekranın tamamını veya bir kısmını geçici olarak atıl duruma getirmek olurken bazen de yalnızca istek — yanıt döngüsünün başladığı bilgisinin kullanıcıya verilip uygulamanın geri kalanını kullanmaya devam etmesinin sağlanması olabiliyor.
Kullanıcıların her daim en güncel ve doğru verileri görmesi, ilki tamamlanmadan aynı sürecin ikiniciye tetiklenmesinin önüne geçilmesi gibi endişeler konu olduğunda bu yöntemler gayet iş görüyor. Fakat bekleme süreleri arttıkça kullanıcılar bir bilinmezi beklemeye başlıyorlar. Bu da kötü bir kullanıcı deneyiminin yanı sıra; işlemin, bir hata olduğu şüphesiyle kullanıcı tarafından iptal edilmesi gibi tehlikeleri beraberinde getiriyor.
Bunun önüne geçmek için kabaca iki seçeneğimiz var. İlki, kullanıcıya işlemin tamamlanacağı tahmini süreye göre sahte bir ilerleme durumu göstermek. %99'a birkaç saniyede gelip %100 olması dakikaları bulan ilerleme durumları genelde bu yöntemle yapılıyor. Bir diğeri ise ilerleme durumunu doğrudan kaynağından, bizim senaryomuzda Axios'un bize sağladığı onUploadProgress ve onDownloadProgress callback fonksiyonlarından almak.
onUploadProgress, onDownloadProgress
Örnek olarak Axios’da bir POST isteğinin nasıl yapıldığını hatırlarsak, axios.post metodu üç adet argüman alıyordu. Bunlardan ilki POST isteğinin yapılacağı URL, ikincisi POST isteğiyle gönderilecek veri, üçüncüsü de header vb. diğer opsiyonel verilerin yer aldığı options nesnesi. onUploadProgress ve onDownloadProgress callback fonksiyonlarını bize bu options nesnesi sağlıyor. Bu fonksiyonlar, içerisinde upload ve download bilgilerinin yer aldığı birer event nesnesi dönüyorlar.
Bu nesnelerdeki belli başlı ortak alanların ne olduğuna ve hangi verileri döndüklerine bir bakalım.
loaded: Yüklenen/indirilen veri boyutu
total: Toplam veri boyutu
progress: İlerleme durumu (0 ila 1 arasında)
bytes: Son tetiklemeden bu yana yüklenen byte sayısı
estimated: Tahmini kalan süre (saniye olarak)
rate: Yükleme hızı (byte olarak)
Sonuç
Bu verileri dinleyerek uygulama içerisindeki ilerleme durumlarını dinamik olarak yönetmek mümkün hale geliyor. Yüklenen veya indirilen veri boyutunu, toplam veri boyutuna oranlayarak yüzdelik dilimler oluşturulabileceği gibi tahmini kalan süre ve yükleme hızı bilgileriyle daha detaylı görsel sayaçlar oluşturulabilir.
Fakat bu verilerin, cihazların internet bağlantılarındaki anomali durumlarından etkilenip tutarsız davranabileceğini de unutmamak gerekiyor. O yüzden bu verileri veya bu verilerle oluşturulan ilerleme durumlarını doğrudan son kullanıcılara göstermek pek güvenli olmayacaktır. Onun yerine bu bilgileri gerekli manipülasyonlardan geçirdikten sonra (minimum ve maksimum değerlerin belirlenmesi, bir önceki değerle mukayese vs. gibi) yukarıda bahsettiğim sahte ilerleme durumlarına veri kaynağı olarak beslemek ve her iki yöntemi birlikte kullanmak daha iyi bir kullanıcı deneyimi oluşturulmasına katkı sağlayacaktır.
