Корбари барнома дар Redux

Дар дарсҳои гузашта мо амалан корро бо қисми серверии барномаи худ анҷом додем, мо онро ба таври зарурӣ дар дарсҳои оянда илова мекунем. Акнун ба мо лозим аст, ки корбари барномаро эҷод кунем, ки талабҳои HTTP-ро ба сервер мефиристад.

Биёед барномаи худро бо маҳсулот кушода ва дар ҷузваи api файли client.js-ро эҷод кунем. Аввал мо худи функсияи client-ро менависем, ки барои ҳам талабҳои GET ва ҳам POST кор мекунад. Он ба ҳамчун параметрҳо роҳ, навъ ва ҷисми талабро (дар сурати POST) мегирад, агар чунин чиз вуҷуд дошта бошад:

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

Баъдӣ ба мо лозим аст, ки объекти options-ро ташкил диҳем, ки дар он мо маълумоти гуногунро барои талаб мефиристем. Ин навъи талаб ва сарлавҳаҳо хоҳад буд:

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)
}

Баъд хат дар зери рамзи client блокро ташкил медиҳем try, ки дар сатри аввали он бо ёрии fetch посухро аз сервер мегирем. Дар сурати номуваффақӣ мо анъанавӣ ваъдаро бо хато бармегардонем:

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

Акнун биёед рамзро дар блоқи try илова нависем. Баъд аз гирифтани response, ба мо даркор аст, ки онро кор кардан. Дарёфтан аз он маълумот дар JSON ва агар вазъияти посух ба мо ишора мекунад, ки ҳама чиз хуб аст, пас объект бо маълумот ва иттилоъро бармегардонем: вазъият, сарлавҳаҳо ва суроға. Агар вазъият 'ok' набошад, пас истисноро бо матни вазъият мепартоем:

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)

Дар ин ҷо ҳама чиз, корбари хурди мо барои кор бо сервер омода аст.

Барномаи худро бо донишҷӯён кушоед, дар он дар ҷузваи api файли client.js-ро эҷод кунед. Бо материалҳои дарс ошно шуда рамзро (нусхабардорӣ кунед) функсияи client ва ду усули он client.get ва client.post-ро нависед.