Redux Tətbiqi üçün Müştəri

Əvvəlki dərslərdə biz tətbiqimizin server hissəsi ilə demək olar ki, işi bitirdik, növbəti dərslərdə lazım olduqda onu bir az əlavə edəcəyik. İndi bizə serverə HTTP sorğuları gözndərəcək tətbiq üçün müştəri yaratmaq lazımdır.

Məhsullarla olan tətbiqimizi açaq və api qovluğunda client.js faylı yaradaq. Əvvəlcə biz həm GET, həm də POST sorğuları üçün işləyəcək client funksiyasını yazacağıq. O, parametr olaraq url, metod və sorğunun bodysini (POST üçün), əgər varsa, qəbul edəcək:

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

Sonra biz müxtəlif məlumatları sorğu üçün ötürəcəyimiz options obyektini qurmalıyıq. Bu sorğunun növü və başlıqlar olacaq:

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

body xassəsi bizim üçün isteğe bağlıdır, biz onu ötürməliyik, əgər sorğumuz POST-dursa. Bunun üçün client içində options obyekti üçün koddan sonra onu options-a JSON formatında sorğu bodysi ilə əlavə edəcəyik, əgər POST metodu seçilibsə:

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

Sonra aşağıda client kodunda biz try blokunu təşkil edəcəyik, onun birinci sətirində fetch istifadə edərək serverdən cavab alacağıq. Uğursuz olduqda biz ənənəvi olaraq xəta ilə bir promis qaytaracağıq:

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

İndi gəlin try blokundakı kodu tamamlayaq. response aldıqdan sonra biz onu emal etməliyik. Ondan məlumatları JSON formatında çıxaracağıq və əgər cavabın statusu bizə hər şeyin qaydasında olduğunu göstərirsə, onda məlumatlar və məlumat olan bir obyekt qaytaracağıq: status, başlıqlar və ünvan. Əgər status 'ok' deyilsə, onda status mətni ilə bir istisna ataq:

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 funksiyası üçün kodumuz hazırdır, qalır sadəcə bizim GET və POST metodlarımızın çağırıldıqda necə işləyəcəyini yazmaq. Gəlin onlar üçün kodu client funksiyasından sonra yazaq. client.get metodu parametr olaraq url qəbul edəcək və client funksiyasını çağıracaq, ona bu url və GET sorğu növünü ötürəcək:

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

Və client.post üçün client-ə url, POST sorğu növü və sorğunun bodysini ötürməlidir:

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

Hamısı budur, bizim kiçik müştərimiz serverlə işləmək üçün hazırdır.

Tələbələrlə olan tətbiqinizi açın, onun içində api qovluğunda client.js faylı yaradın. Dərsin materialları ilə tanış olduqdan sonra (kopyalayın) client funksiyasının və onun iki metodunun client.get və client.post kodunu yazın.