Javascript 15 — Fetch Api 1

Ajax yerine alternatif olarak asenkron veri alma ve veri gönderme apisidir. Fetch api olumlu işlemi promise olarak yani resolve diye dönüyor. Bunu then ile yakalayabiliyoruz.

Aslında Fetch api bize promise döner. Eğer sonuç olumlu ise then hatalı ise catch ile yakalayabiliyoruz. Fetch api Window objesinin içinde bulunur.

UFAK BİR BİLGİ : Axios bir packagedir. Npm install diyerek indirerek kullanılır. React de axios’u import ederek kullanırken fetchi import etmemize gerek kalmaz. Çünkü window objesinin içerisinde bulunur.

window objesinin içerisinde bulunan bir method sayesinde fetch apisini kullanıcaz. Bu yüzden direk fetch yada this.fetch ile erişebiliriz.
Veya window.fetch() bile olur.

Burada fetch, bize herşey yolunda giderse then function’i çağırır. Bu then() methodu içerisine Response objesi döner. Bu response objesi içerisindeki değeri text veya json diyerek alabiliriz. Ayrıca bu response objemizde status, redirect gibi değerler de bulunur.

Duruma göre json verisi ise response.json , text verisi ise response.text
kullanırız. İçine belirtmediğimiz sürece fetch get request atar. Ayrıca fetch api asenkron çalışır.

class Request diyip bunun constructor’ını yazmazsak nesne oluşturulamaz. constructor yazmayıp bir method yazarsak içerisinde this dersek direk window objesine ulaşırız.

Bu işlemde datayı fetch(url) içerisindeki function’da alıyoruz. Ancak const req tarafında alamıyoruz. Bu datayı çağırdığımız tarafta almak için promise kullanıcaz.

Bu kodda datayı çağıran tarafa promise ile dönüyoruz. Promise içerisinde fetch atıp ordan gelen cevap başarılı ise bizde resolve atıyoruz error ise reject atıyoruz ve çağıran taraftan yakalıyoruz.

Makalelerimin tamamına erişmek isteyen arkadaşlar için hepsinin linkinin bulunduğu bir tutorial hazırladım. Aşağıdaki linkte paylaşıyorum.

https://medium.com/@omercelikceng/javascript-makalelerimin-tamam%C4%B1-45a71ac3b386