Redux ilova uchun mijoz

Oldingi darslarda biz ilovamizning server qismi bilan ishlashni deyarli yakunladik, keyingi darslarda zarurat tug'ilganida uni biroz to'ldiramiz. Endi bizga serverga HTTP-so'rovlar yuboradigan ilova uchun mijoz yaratish zarur.

Mahsulotlar bilan ilovamizni ochamiz va api papkasida client.js faylini yaratamiz. Boshlanishiga biz client funksiyasining o'zini yozamiz, u ham GET ham POST so'rovlari uchun ishlaydi. U parametr sifatida yo'l, so'rov turi va so'rov tana qismini (POST holatida), agar mavjud bo'lsa, oladi:

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

Keyin biz so'rov uchun turli ma'lumotlarni uzatadigan options obyektini shakllantirishimiz kerak. Bu so'rov turi va sarlavhalar bo'ladi:

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

body xususiyati bizda ixtiyoriy, biz uni POST-so'rov bo'lsa uzatishimiz kerak. Buning uchun client ichida options obyekti uchun koddan keyin uni options ga JSON formatidagi so'rov tana qismi bilan qo'shamiz, agar POST metodi tanlangan bo'lsa:

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

Keyin pastroqda client kodida biz try blokini tashkil qilamiz, uning birinchi qatorida fetch yordamida serverdan javob olamiz. Muvaffaqiyatsizlik holatida biz an'anaviy ravishda xatolik bilan promis qaytaramiz:

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

Endi try blokidagi kodni to'ldiramiz. response ni olgandan so'ng, biz uni qayta ishlashimiz kerak. Undan ma'lumotlarni JSON da olamiz va agar javob statusi bizga hammasi joyida ekanligini signal bersa, u holda ma'lumotlar va ma'lumot bilan obyektni qaytaramiz: status, sarlavhalar va manzil. Agar status 'ok' bo'lmasa, u holda status matni bilan istisnoni chiqaramiz:

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 funksiyasi uchun kodimiz tayyor, qolgani faqat GET va POST metodlarimiz chaqirilganda qanday ishlashini yozish. Keling client funksiyasidan keyin ular uchun kod yozamiz. client.get metodi parametr sifatida yo'lni oladi va client funksiyasini chaqiradi, unga bu yo'lni va GET so'rov turini uzatadi:

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

client.post esa client uchun yo'l, POST so'rov turi va so'rov tana qismini uzatishi kerak:

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

Hammasi shu, bizning kichik mijozimiz server bilan ishlashga tayyor.

Talabalar bilan ilovangizni oching, unda api papkasida client.js faylini yarating. Dars materiallari bilan tanishib chiqqach client funksiyasi va uning ikkita metodining client.get va client.post kodini yozing (nusxalang).