रेडक्स एप्लिकेशन के लिए क्लाइंट

पिछले पाठों में, हमने व्यावहारिक रूप से हमारे एप्लिकेशन के सर्वर-साइड भाग के साथ काम पूरा कर लिया है, हम अगले पाठों में आवश्यकतानुसार इसे थोड़ा और जोड़ देंगे। अब हमें एप्लिकेशन के लिए एक क्लाइंट बनाने की आवश्यकता है जो सर्वर पर 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 का कोड लिखें (कॉपी करें)।