Redux යෙදුම සඳහා සේවාලාභියා

පෙර පාඩම්වලදී අපි අපගේ යෙදුමේ සේවාදායක පැත්ත සම්පූර්ණයෙන්ම සම්පූර්ණ කළෙමු, අනාගත පාඩම්වල අවශ්යතාවයන්ට අනුව අපි එය සුළු වශයෙන් සංශෝධනය කරමු. දැන් අපට අවශ්ය වන්නේ සේවාදායකයට HTTP ඉල්ලීම් යවන යෙදුම සඳහා සේවාලාභියෙකු නිර්මාණය කිරීමයි.

අපගේ නිෂ්පාදන යෙදුම විවෘත කර api ෆෝල්ඩරය තුළ client.js ගොනුව සාදමු. පළමුව අපි client ශ්‍රිතයම ලියන්නෙමු, එය GET සහ POST ඉල්ලීම් දෙකටම වැඩ කරනු ඇත. පරාමිතීන් ලෙස එය URL පථය, ක්‍රමය සහ ඉල්ලීමේ ශරීරය (POST සඳහා), එසේ තිබේ නම් ලබා ගනු ඇත:

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

ඊළඟට අපි options වස්තුව options සකස් කළ යුතුය, එහිදී අපි ඉල්ලීම සඳහා විවිධ තොරතුරු යවන්නෙමු. මෙය ඉල්ලීමේ ක්‍රමය සහ ශීර්ෂ වේ:

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

body ගුණාංගය අපට විකල්පයක් වන අතර, අප එය POST ඉල්ලීමක් වන විට යැවිය යුතුය. මේ සඳහා options වස්තුව සඳහා කේතයට පසුව client තුළ JSON ආකෘතියෙන් ඉල්ලීමේ ශරීරය සමඟ options වෙත එය එක් කරන්න, ක්‍රමය 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 ලෙස උපුටා ගෙන, ප්‍රතිචාර තත්ත්වය හොඳ බව පෙන්වන්නේ නම්, දත්ත සහ තොරතුරු සහිත වස්තුව ආපසු යවන්න: තත්ත්වය, ශීර්ෂ සහ URL. එසේ නොවේ නම්, එනම් තත්ත්වය '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 ක්‍රමය පරාමිතියක් ලෙස URL පථය ලබා ගන්නා අතර client ශ්‍රිතය ක්‍රියාත්මක කරයි, එයට මෙම පථය සහ GET ඉල්ලීමේ වර්ගය යොමු කරයි:

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

client.post මගින් client වෙත URL පථය, POST ඉල්ලීමේ වර්ගය සහ ඉල්ලීමේ ශරීරය යොමු කළ යුතුය:

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

මෙයින් සියල්ල අවසන්, අපගේ කුඩා සේවාලාභියා සේවාදායකය සමඟ වැඩ කිරීමට සූදානම්.

ඔබගේ ශිෂ්‍ය යෙදුම විවෘත කරන්න, එහි api ෆෝල්ඩරය තුළ client.js ගොනුව සාදන්න. පාඩම් ආකරය සමාලෝචනය කිරීමෙන් පසු client ශ්‍රිතයේ කේතය සහ එහි ක්‍රම දෙකේ client.get සහ client.post කේතය ලියන්න (පිටපත් කරන්න).