Redux қолданбасы үшін клиент

Алдыңғы сабақтарда біз қолданбамыздың серверлік бөлігімен жұмысты іс жүзінде аяқтадық, олды келесі сабақтарда қажеттілікке қарай сәл толықтырамыз. Енді бізге серверге HTTP-сұраулар жіберетін қолданба үшін клиентті жасау қажет.

Өнімдерімізбен қолданбаны ашып, api бумасында client.js файлын жасайық. Алдымен біз GET үшін де, POST үшін де жұмыс істейтін client функциясын өзіміз жазамыз. Ол параметр ретінде жолды, сұрау түрін және сұрау денесін (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 кодын жазыңыз (көшіріңіз).