Mteja wa Programu kwenye Redux

Katika masomo yaliyopita, karibu tumemaliza kazi na sehemu ya seva kwa programu yetu, tutaiongeza kidogo kadri inavyohitajika katika masomo yafuatayo. Sasa tunahitaji kuunda mteja wa programu, ambaye atatumie maombi ya HTTP kwa seva.

Wacha tufungue programu yetu ya bidhaa na katika folda api tuunde faili client.js. Kwa kuanza, tutaandika function client yenyewe, ambayo itafanya kazi kwa maombi ya GET na POST. Itapokea njia, aina, na mwili wa ombi (katika kesi ya POST), ikiwa kuna hiyo:

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

Ifuatayo tunahitaji kuunda kitu options, ambacho tutapitia taarifa mbalimbali kwa ombi. Hii itakuwa aina ya ombi na vichwa:

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

Sifa body yetu ni hiari, tunapaswa kuipitisha, ikiwa tuna ombi la POST. Kwa hili ndani ya client baada ya msimbo wa kitu options tutaiongeza kwenye options na mwili wa ombi kwa muundo JSON, ikiwa njia ya POST imechaguliwa:

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

Kisha chini katika msimbo wa client tutapanga kipande try, katika mstari wake wa kwanza kwa kutumia fetch tutapata jibu kutoka kwa seva. Katika kesi ya kushindwa tutarudisha ahadi na hitilafu:

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

Sasa wacha tuandikishe msimbo katika kipande try. Baada ya kupata response, tunahitaji kuitayarisha. Tutatoa data yake kwa JSON na ikiwa hali ya jibu inatuonyesha kuwa yote yako sawa, basi tutarudisha kitu na data na taarifa: hali, vichwa na anwani. Ikiwa hali sio 'ok', basi tutatupa isipokuwa na maandishi ya hali:

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

Msimbo wa function client umeandaliwa, inabaki tu kuandika jinsi njia zetu GET na POST zitakavyofanya kazi wakati wa mwito. Wacha tuandike msimbo kwa ajio yao baada ya function client. Njia client.get itachukua kama kigezo njia na kuita function client, ikimpa hii njia na aina ya ombi GET:

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

Na client.post inapaswa kupitisha kwa client njia, aina ya ombi POST na mwili wa ombi:

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

Haya yote, mteja wetu mdogo umeandaliwa kwa kufanya kazi na seva.

Fungua programu yako ya wanafunzi, unde ndani yake katika folda api faili client.js. Ukishasomea nyenzo za somo andika (nakili) msimbo wa function client na njia zake mbili client.get na client.post.