Redux иловаси учун клиент

Олдинги дарсларда биз иловамизнинг сервер томони ишини деярли якунладик, кейинги дарсларда зарур бўлганида уни янада тўлдириб борамиз. Энди бизга серверга HTTP-сўровлар юборадиган илова учун клиент яратиш лозим.

Махсулотлар билан ишлайдиган иловамизни ochamiz ва api papkasida client.js файлини яратамиз. Аввал биз client функциясини ёзамиз, у GET ва POST сўровлари учун ишлайди. Параметр сифатида у йўлни, сўров тури ва сўров танасини (POST учун), агар mavjud бўлса, олади:

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

Keyin биз turli xil сўров маълумотларини юборадиган options объектини shakllantirishimiz керак. У сўров тури ва сарлавҳаларни ўз ичига олади:

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

body хусусияти бизда мажбурий эмас, биз уни POST-сўров бўлганда ўтказишимиз керак. Бунинг учун client ичида options объекти учун коддан кейин уни options га JSON форматидаги сўров танаси билан қўшамиз, агар POST усули танланган бўлса:

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

Keyin client даги кодда try блокини tashkil qilamiz, унинг биринчи сатрида fetch ёрдамида сервердан жавоб оламиз. Muvaffaqiyatsizlik ҳолатида анъанавий ravishda xato bilan промис қайтарамиз:

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

Энди try блокидаги коди ёзамиз. response ни олгандан сўнг, биз уни қайта ишлашимиз керак. Ундан JSON даги маълумотларни ajratib olamiz ва агар жавоб статуси ҳаммаси яхши эканлигини anglatadigan бўлса, биз маълумотлар ва маълумот bilan объектни қайтарамиз: статус, сарлавҳалар ва манзил. Агар статус 'ok' бўлмаса, статус мати билан istisno 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 функцияси учун код тайёр, фақат чақирилганда GET ва POST усулларимиз қандай ишлашини ёзиш қолди. Келинг client функциясидан кейин улар учун код ёзайлик. client.get усули параметр сифатида йўлни олади ва client функциясини чақириб, унга бу йўлни ва GET сўров турини ўтказади:

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

client.post эса client учун йўлни, POST сўров турини ва сўров танасини ўтказиши керак:

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

Шу билан ҳаммаси, кичик клиентимиз сервер билан ишлашга тайёр.

Студентлар билан ишлайдиган иловангизни oching, унинг api papkasida client.js файлини яратинг. Дарс материаллари билан танишиб чиққандан сўнг client функцияси ва унинг икки усули client.get ва client.post учун код ёзинг (нусхаланг).