Fetch API, promise'in network istekleri için özelleştirilmiş halidir. Network üzerinden bilgi çekmek yahut dosyaya yazmak/okumak için kullanabileceğimiz özel bir API'dir. Native halde JavaScript'te bulunur. Yani third party bir şey kurmaya gerek yok.

Fetch API, JavaScript'te yerleşik olarak bulunan ve ağ istekleri için özelleştirilmiş bir promise yapısıdır. Ağ üzerinden veri çekmek veya dosya okuma/yazma işlemleri için kullanılabilir ve üçüncü taraf bir şey kurmaya gerek yoktur.

Micro task kuyruğuna giden, yani 2. kuyruğa giden asenkron bir kod bloğudur.

fetch ile CRUD işlemlerini yapabiliriz. fetch("url") dedik mi direkt GET isteğidir bu.

fetch("url", {method: 'POST', body: JSON.stringify(data), headers: {"X-Auth-Token" : "abc123"}})

Bazı API'larda şifreli olabilir, headers adı altında şifreyi göndermek gerekebilir. body kısmında ise içeriği göndeririz.

FETCH API ile GET, POST, PUT, DELETE gibi CRUD işlemlerini yaparız.

API Nedir?

İnternet ortamında her şey API'lar üzerinden dönüyor.

JSON formatter extension'ı veriyi güzel bir şekilde görmemize yardımcı olur.

Dışa bağımlı olan uzun süreli işlemler genellikle asenkron ile yapılır. Eğer asenkron yapmazsak, başka komutlar 2 saniye 3 saniye sürebilir; kod çalışana kadar diğer kodları bloklar. O yüzden network istekleri, input-output istekleri, dosya okuma, dosya yazma, printer'a veri gönderme gibi dışa bağımlı olan uzun süreli işlemler genellikle asenkron yapılır. Network işlemleri için yazılmış API var; Fetch API'yi biz de bunu kullanırız.

Browser'dan POST, PUT işlemi yapmak zordur. Veri göndermek, o ayarlamaları yapmak, token göndermek gibi işlemleri yapamazsınız. Bu gibi işlemler ya uygulama içerisinde yapılır, ya da bununla alakalı tool'lar var. Postman gibi, Thunder gibi vs.

İlk olarak fetch fonksiyonunu çağırırız, sonra buna istek atacağımız adresi belirtiriz. Aksi belirtilmediği takdirde GET isteği atar. Attığımız isteği then'ler ile yakalarız. Fetch kısmı bize veri döndürür. Aslında Response döndürür. Prototype'ı Response'dur. Response da Object'ten türetilmiştir. Atası yine Object yani, bir alt atası Response'dir. Biz burada istediğimiz veriyi, JSON datayı görmeyiz, çünkü bu bize ham veriyi döner. Yani kılıflanmış Response verisi.

fetch("https://api.github.com/users").then((res) => console.log(res))

Bu yukarıdaki kod kapalı bir veri (readable stream) döner, bunu da açmak lazım.

https://developer.mozilla.org/en-US/docs/Web/HTTP/Messages

HTTP mesajları, sunucu ve istemci arasında veri alışverişinin nasıl gerçekleştiğini açıklayan temel yapı taşlarıdır. Bu mesajlar iki ana türe ayrılır:

• İstemci tarafından sunucuya gönderilen ve sunucuda bir işlem başlatmayı amaçlayan istekler (requests)
• Sunucunun bu isteklere verdiği yanıtlar (responses)

Her iki tür mesaj da benzer bir yapıya sahiptir ve şu bileşenlerden oluşur:

1. Başlangıç satırı (start-line): İsteğin ne olduğunu veya yanıtın durumunu belirten tek satırlık bir açıklama
2. HTTP başlıkları (headers): İsteği veya yanıtı daha detaylı tanımlayan opsiyonel bilgiler
3. Boş satır: Başlık bilgilerinin bittiğini gösteren bir ayraç
4. Gövde (body): İsteğe bağlı olarak, istek veya yanıtla ilişkili veriyi içeren kısım

Bu yapı, HTTP iletişiminin temelini oluşturur ve web geliştiricilerin sunucu-istemci etkileşimlerini anlamalarına ve yönetmelerine olanak tanır.

Bunu aynı HTML gibi düşünebilirsiniz, head'de temel bilgiler varken, body'den bilgiler gönderilir vs.

Header'da temel ayarlama bilgileri bulunuyor, şifreler vs.

Body'de ise payload var yani yüklü veri var, bir obje olarak.

Dönüşünde header ve body'si vardır (Response).

fetch("https://api.github.com/users")
.then((res) => {
	console.log(res)
	return res.json()
	})
.then((res) => console.log(res))

Burada JSON ile body'de dönen bilgi açılmış oldu.

JSON.stringify bir objeyi (mesela bu JSON objesi olabilir) düz string haline çeviriyor.

JSON fonksiyonu da ReadableStream olan body'nin içerisindeki bilgiyi çıkarıyor, JSON hâline çeviriyor.

Yukarıda ilk then'de veriyi JSON'laştırıyoruz. Bu işlem zaman alıcı bir işlem olabilir, asenkron olması gerekir. İlk then ile bittiğinden emin olup ikinci bir then ile başka bir yere işlenmek üzere verebiliriz. Yani bir nevi cevizin kabuğunu kırdık, içindeki cevizi aldık.

İlk aşamada response kullanılır, ikinci aşamada data kullanılır. Bu, best practice içindir.

Uzaktaki bir network'e istek atıyoruz, onun gönderdiği veriyi açıp işlenebilir hâle getiriyoruz. Çünkü bunu kullanıcıya sunacağız.

İlk then'de JSON'laştırma işlemi yapılır. Çünkü bu işlem biraz sürebilir. Ondan sonrasında JSON'laştırılmış veriyi alıp bir yere göndeririz işlenmek üzere. Yani ilk then zaman alıcı bir işlem olabilir, asenkron olması lazım o yüzden. Bittiğinden emin olup ikinci bir then ile kullanmak üzere başka yere verebiliriz.

fetch("https://api.github.com/user")
.then((res) => {
	console.log(res)
	return res.json()
	})
.then((res) => console.log(res))
.catch((err) => document.write(err))

Hata dönmesinin nedenleri: yanlış bir URL vermiş olabilirsiniz; network hatası olabilir, paketler bozulabilir, bilgiler gitmeyebilir veya bozulabilir; şifreli bir API'dir, şifreyi yanlış girersiniz olabilir; başka bir hata olarak POST isteği atmak istiyorsunuz fakat gittiniz PUT isteği attınız: metod yanlışlığı vs.

İşte bu hatalardan herhangi biri olduğunda ben then'lere girmemesini, catch'e girmesini beklerim. Promise'da direkt catch'e girerken, fetch'te girmez. Bu, Fetch API ile alakalı bir durum; bu API optimistik bir API'dir. Kendisine bir veri gelirse eğer, "ben verimi aldım" der, catch'e girmez. Fetch API'da bundan dolayı başarılı yahut başarısız dönmesini bizim kontrol etmemiz lazım. Bize Response'dan dönen bilginin içerisindeki "ok" olma durumuna bakarız.

Hata olduğunda da then'ler de çalışır. Direkt promise'taki gibi catch'i direkt çalıştırmaz. Bundan dolayı bizim veriyi handle etmemiz lazım. throw ile res.ok'de hata olması durumunda fırlatırız, direkt catch'e gider.

Status code 200 ile 299 arasında başarılıdır.

fetch("https://api.github.com/user")
.then((res) => {
	console.log(res)
	if(!res.ok) {
		throw new Error(`Something went wrong ${res.status}`)
	}
	return res.json()
	})
.then((res) => console.log(res))
.catch((err) => document.write(err))

İstek attığımızda hata varsa return çalışmaz, catch bloğunda hatayı handle ederiz. JSON'laştırıldıktan sonraki then'de "res" olarak değil, genellikle "data" olarak kullanılır.