კლიენტი აპლიკაციისთვის 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 კოდი.