Կլիենտ 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-ի կոդը։