Javascriptde fetch fonksiyonu ile http işlemleri

Javascript dünyası her geçen gün dahada büyüyor ve özellikleri beni günden güne kendisine daha çekip aşık ediyor diyebilirim bu yeni özelliklerden biri ile artık $.ajax yerine sıklıkla görmeye başlayacağımız fonksiyonlardan biri olan fetch fonksiyonunu derinlemesine incelemeye çalışacağız.

Javascript’de fetch fonksiyonu ile http işlemleri

Javascriptde fetch fonksiyonu ile http işlemleri

Baştan belirtelim fetch özelliği bütün tarayıcılar tarafından desteklenmemektedir mozilla.org’dan belirtilen uyarıda halen deneysel bir süreçde olduğu belirtiliyor hangi tarayıcının minimum kaç versiyonda olması gerekiyor bunlara tarayıcı desteği kısmından bakabilirsiniz. Ama yinede kullanmak istiyorsanız projenizde o zaman tam olarak tüm tarayıcılarda stabil hale gelene kadar fetch ile beraber fetch polyfill kullanabilirsiniz.

Şimdide fetch’in işleyişinin nasıl olduğuna gözatalım ve örnek kodlar ile ilerleyelim.

fetch Promise tabanlı olduğu için async bir yapıdır. fetch yapısından önce ajax onun öncesinde ise XMLHttpRequest ile http isteklerimizi gerçekleştiriyorduk şimdi sırasıyla en eski yöntemlerden olan XMLHttpRequest sonrasında Ajax ve fetch yöntemlerini basit bir istek ile nasıl gerçekleştirebileceğimizi göreceğiz.

XMLHttpRequest

Ajax

fetch

Gördüğünüz gibi herhangi bir javascript kütüphanesi kullanmadan yeni fetch adlı http isteklerimizi karşılayacağımız yöntemden sonra ciddi anlamda XMLHttpRequest‘e elveda deme vakti gelmiştir. Karmaşık XMLHttpRequest aksine fetch‘in Promise altyapısını kullanması dolayısıyla çok temiz ve basit bir yapısı bulunmaktadır fetch‘i tam olarak anlayabilmek için öncelikle Promise konusuna gözatmanızı öneririm.

Makalenin bundan sonraki kısımlarında fetch kullanımı üzerinde durulacaktır ama bazı kısımlarda karşılaştırma yapmak için XMLHttpRequest yada Ajax yöntemlerine atıfta bulunabiliriz.

Fetch fonksiyonu ile yaptığımız istekler sonucunda Stream türünde bir response nesnesi dönecektir. Eğer response’umuz text ise .text() fonksiyonunu kullanarak text sonucunu elde edebilirsiniz yada response’un json olduğunu biliyorsanız .json() fonksiyonunu kullanarak json objesini elde edebilirsiniz .text() ve .json() fonksiyonları Promise altyapısı ile async olarak çalışan fonksiyonlardır. Şimdi üstteki fetch fonksiyonu ile yaptığımız istek sonucunda response nesnesinin içeriğini görelim.

Javascript'de fetch fonksiyonu ile http işlemleri

Üstteki görselde .json() ve .text() fonksiyonlarının Reponse adlı bir nesneden miras olarak geldiğini görüyoruz bizim ihtiyacımız olan cevap ise Response nesnesi altındaki body özelliğinde yer almaktadır ve body nesnesininde ReadableStream türünde bir Stream nesnesi olduğunu görüyoruz. Bu Stream nesnesinden istediğimiz json, text yada blob sonuçlarını elde etmek için yine aynı isimde yer alan Promise altyapısını kullanan async fonksiyonlarını çalıştırarak istediğimiz sonucu elde edebiliyoruz.

Response Meta Verileri

Header’daki meta’ları almak çok basit response header.get fonksiyonu yardımı ile header’lara erişebiliyoruz.

Şimdi fetch’de promise işlemlerini nasıl yönettiğimize bakalım.

Üstte yer alan işlemleri adım adım anlatalım, fetch fonksiyonuna istekte bulunduğumuz adresi girdik ve fetch fonksiyonunun Promise altyapısını kullandığını söylemiştik bundan dolayı async işlem sonucunda yakalama işlemini then fonksiyonunda yapıyoruz. İlk then fonksiyonuna lokal fonksiyonumuz olan status adlı fonksiyonumuzu veriyoruz ve sonuç döndüğünde status fonksiyonu içerisine düşünüyor bizde status fonksiyonu içerisinde if bloğunda status‘un 200’eşit ve üstü 300 altı olup olmadığını kontrol ediyoruz eğer koşullar sağlanırsa başarılı bir işlem olduğunu belirtmek ve bir sonraki then fonksiyonuna düşebilmesi için Promise.resolve adlı fonksiyonu kullanıyoruz koşullar sağlanmaz ise o zaman Promise.reject fonksiyonu kullanılarak catch fonksiyonuna düşmesini sağlıyoruz catch fonksiyonuna hatanın ne olduğunu response.statusText‘indeki mesajı gönderiyoruz ve catch‘de bu hatayı console‘a basıyoruz. if koşullarının başarılı olduğu kısmına geri dönersek bir sonraki then’e düşmesi için Promise.resolve adlı fonksiyonu çalıştırdığımızı belirtmiştik bir sonraki then fonksiyonunda ise json adlı fonksiyonumuzu verdiğimizi görüyoruz ve bu fonksiyon içerisinde response nesnesinin json nesnesine dönüştürülmesi sağlanıyor bu dönüştürme işlemide bir Promise işlemi olduğu için geriye Promise nesnesi dönmektedir ve eğer işlem başarılı ise bir sonraki then fonksiyonuna atadığımız anonymous function tetiklenecektir ve data parametresindeki json nesnemize erişip istediğimiz işlemi yapabileceğiz.

Post İşlemi

Şimdiye kadarki örneklerimizde herhangi bir http method türü belirtmediğimiz için varsayılan olarak GET istekleri yapılıyordu fakat eğer POST metodu ile istek yapmak istersek ne gibi işlemler yapmamız gerekiyor bunun üzerine bir kod örneğimize gözatalım.

Üstteki koda baktığınızda şimdiye kadarki fetch örneklerimizden farklı olarak fetch fonksiyonunun 2.parametresine ayarlarımızı giriyoruz. Örnek olarak method’un post olduğunu belirtiyoruz header’da gönderdiğimiz verinin mime/type’i ve charset’ini belirliyoruz body’de ise post ettiğimiz json objesi yer alıyor. Diğer süreçleri bir önceki örnekte anlattığım için bu kısımlara değinmeyeceğim. Ayarlar kısmında

Tarayıcı Desteği

 API [fa class=”fa-chrome fa-2x”] [fa class=”fa-edge fa-2x”][fa class=”fa-firefox fa-2x”][fa class=”fa-safari fa-2x”][fa class=”fa-opera fa-2x”]
 Fetch 42.014.052.010.144.0

Eğer tarayıcınız fetch özelliğini desteklemiyor ise o zaman fetch polyfill javascript kütüphanesini projenize dahil ederek tarayıcınıza fetch özelliğini kazandırabilirsiniz. fetch polyfill’i kullanarak IE’da sadece 10 ve üstü sürümleri destekleyebilirsiniz diğer popüler tarayıcılarda ise kendilerini sürekli güncellediğinden zaten sorun yaşamayacaksınızdır fakat olurda desteklemez ise fetch polyfill ile bu özelliği kazandırabilirsiniz.

Sonuç

Javascriptde fetch fonksiyonunu şimdiden kullanmaya başlayınız hazır tüm popüler tarayıcılar tarafından destekleniyorken başlamalısınız ama eski versiyon tarayıcılar konusunda çekingenliğiniz var ise o zaman Tarayıcı Desteği kısmındaki polyfill çözümünü kullanınız.

Kaynaklar

Bunlar da hoşunuza gidebilir...

2 Cevaplar

  1. İsa Toltar dedi ki:

    Makale için teşekkürler. Şuanda bu konu üzerindeyim ve pekistirmeme yardimcı oldu.

Bir Cevap Yazın