Redux Uygulaması için İstemci

Önceki derslerde uygulamamızın sunucu tarafıyla ilgili çalışmaları neredeyse tamamladık, bir sonraki derslerde gerektiğinde biraz daha ekleme yapacağız. Şimdi, sunucuya HTTP istekleri gönderecek olan uygulama için bir istemci oluşturmamız gerekiyor.

Ürün uygulamamızı açalım ve api klasöründe client.js dosyasını oluşturalım. Başlangıç olarak, hem GET hem de POST istekleri için çalışacak olan client fonksiyonunu yazacağız. Parametre olarak yol, istek türü ve istek gövdesini (POST durumunda) alacak, eğer varsa:

export async function client(url, method, body = {}) {}

Sonra, çeşitli istek bilgilerini ileteceğimiz options nesnesini oluşturmamız gerekiyor. Bu, istek türü ve başlıkları olacak:

export async function client(url, method, body = {}) {
	const options = {
		method: method,
		headers: {
			'Content-Type': 'application/json',
		},
	}
}

body özelliği bizim için isteğe bağlıdır, onu POST isteğimiz olduğunda iletmeliyiz. Bunun için client içinde, options nesnesi için olan koddan sonra, eğer POST metodu seçilmişse, JSON formatındaki istek gövdesiyle birlikte onu options'a ekleyeceğiz:

if (method === 'POST') {
	options.body = JSON.stringify(body)
}

Daha sonra aşağıda client kodunda, ilk satırında fetch kullanarak sunucudan yanıt alacağımız try bloğunu organize edeceğiz. Başarısızlık durumunda geleneksel olarak bir hata ile bir promise döndüreceğiz:

let data
try {
	const response = await window.fetch(url, options)
} catch (err) {
	return Promise.reject(err.message ? err.message : data)
}

Şimdi try bloğundaki kodu tamamlayalım. response'u aldıktan sonra, onu işlememiz gerekiyor. Ondan JSON formatında veriyi çıkaracağız ve eğer yanıt durumu bize her şeyin yolunda olduğunu söylüyorsa, veriler ve bilgilerle (durum, başlıklar ve adres) birlikte bir nesne döndüreceğiz. Eğer durum 'ok' değilse, durum metniyle bir istisna fırlatacağız:

try {
	const response = await window.fetch(url, options)
	data = await response.json()
	if (response.ok) {
		return {
			status: response.status,
			headers: response.headers,
			url: response.url,
			data,
		}
	}
	throw new Error(response.statusText)
}

client fonksiyonu için kodumuz hazır, geriye kalan sadece GET ve POST metodlarımızın çağrıldığında nasıl çalışacağını yazmak. Haydi client fonksiyonundan sonra onlar için kodu yazalım. client.get metodu parametre olarak bir yol alacak ve client fonksiyonunu çağıracak, ona bu yolu ve GET istek türünü iletecek:

client.get = (url) => client(url, 'GET')

Ve client.post, client için yolu, POST istek türünü ve istek gövdesini iletmelidir:

client.post = (url, body) => client(url, 'POST', body)

Bu kadar, küçük istemcimiz sunucu ile çalışmaya hazır.

Öğrenci uygulamanızı açın, içinde api klasöründe client.js dosyasını oluşturun. Ders materyallerini inceleyerek client fonksiyonunun ve onun iki metodunun (client.get ve client.post) kodunu yazın (kopyalayın).