जावास्क्रिप्ट फ़ेच:एक गाइड

क्या आप जानते हैं कि आप वैनिला जावास्क्रिप्ट में वेब अनुरोध कर सकते हैं? यह सही है, वेब अनुरोध करने के लिए आपको कोई पुस्तकालय स्थापित करने की आवश्यकता नहीं है। इतना ही नहीं:हम पुराने, जटिल XMLHttpRequest टूल के बारे में बात नहीं कर रहे हैं।

फ़ेच एपीआई आपको सादे पुराने जावास्क्रिप्ट में अजाक्स अनुरोध करने की अनुमति देता है। यह डेटा पुनर्प्राप्त करने और वेब सर्वर पर डेटा में परिवर्तन करने के लिए एक उपयोगी उपकरण है।

इस गाइड में, हम चर्चा करने जा रहे हैं कि फ़ेच एपीआई क्या है और आप एपीआई का उपयोग करके वेब अनुरोध कैसे कर सकते हैं। हम दो उदाहरणों के माध्यम से बात करेंगे:एक GET अनुरोध और एक POST अनुरोध।

फ़ेच API क्या है?

जावास्क्रिप्ट लंबे समय से नेटवर्क अनुरोध भेजने में सक्षम है। XMLHTTPRequest टूल ने आपको सर्वर से डेटा पुनर्प्राप्त करने और सर्वर से जानकारी अपडेट करने के लिए आवश्यक संसाधन प्रदान किए हैं।

जबकि यह उपकरण प्रभावी था, यह उपयोग करने के लिए काफी क्रियात्मक और जटिल भी था। दूसरी ओर, फ़ेच एक नया विकल्प है जो वेब अनुरोध करना आसान बनाता है।

फ़ेच एपीआई सभी आधुनिक ब्राउज़रों में समर्थित है। इसका मतलब यह है कि एक बार जब आप इसका उपयोग करना सीख जाते हैं, तो आपको वेब अनुरोध करते समय ब्राउज़र संगतता के बारे में चिंता करने की आवश्यकता नहीं होगी।

फ़ेच का उपयोग करके GET अनुरोध कैसे करें

उदाहरण के द्वारा यह बताने का सबसे अच्छा तरीका है कि फ़ेच कैसे काम करता है। इस ट्यूटोरियल के लिए, हम वेब सेवा JSONPlaceholder का उपयोग करने जा रहे हैं। यह एक एपीआई है जो पूर्व-लिखित डमी डेटा के साथ आता है जिसका उपयोग हम अपने वेब अनुरोधों का परीक्षण करने के लिए कर सकते हैं।

निम्न कोड JSONPlaceholder से पहली पोस्ट पुनर्प्राप्त करने के लिए एक GET अनुरोध बनाता है:

81% प्रतिभागियों ने कहा कि बूटकैंप में भाग लेने के बाद उन्हें अपनी तकनीकी नौकरी की संभावनाओं के बारे में अधिक आत्मविश्वास महसूस हुआ। आज ही एक बूटकैंप से मिलान करें।

बूटकैंप शुरू करने से लेकर अपनी पहली नौकरी खोजने तक, औसत बूटकैंप ग्रेड ने करियर संक्रमण में छह महीने से भी कम समय बिताया।

fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => response.json())
  .then(json => console.log(json))

यह कोड लौटाता है:

{ body: "quia et suscipit suscipit recusandae consequuntur expedita et cum reprehenderit molestiae ut ut quas totam nostrum rerum est autem sunt rem eveniet architecto", id: 1, title: "sunt aut facere repellat provident occaecati excepturi optio reprehenderit", userId: 1 }

आइए हमारे कोड को तोड़ दें। पहली पंक्ति में, हमने fetch() . का उपयोग किया है JSONPlaceholder API के लिए वेब अनुरोध आरंभ करने की विधि। हमने तब .then() . का उपयोग किया है हमारे कोड को यह बताने के लिए कि हमारा वेब अनुरोध किए जाने के बाद क्या करना है।

हमारे पहले .then() . में विधि, हम एपीआई द्वारा दी गई प्रतिक्रिया को JSON में परिवर्तित करते हैं। यह हमारे डेटा को और अधिक पठनीय बनाता है। हम एक और .then() . का इस्तेमाल करते हैं कंसोल पर प्रतिक्रिया लॉग करने की विधि। यह हमें JSONPlaceholder API से आईडी 1 वाली पोस्ट दिखाता है।

पोस्ट अनुरोध कैसे करें

GET एकमात्र अनुरोध प्रकार नहीं है जिसे आप फ़ेच एपीआई के साथ बना सकते हैं। ऐसी कार्यक्षमता भी है जो POST, PUT और DELETE अनुरोधों का समर्थन करती है। इनके लिए सिंटैक्स समान है, इसलिए हम केवल एक उदाहरण के माध्यम से चलने जा रहे हैं:POST अनुरोध कैसे करें।

जब आप कोई POST, PUT, या DELETE अनुरोध कर रहे होते हैं, तो आमतौर पर तीन प्रकार की जानकारी होती है जिसे आपको निर्दिष्ट करने की आवश्यकता होती है:

• वह URL जिससे आप अनुरोध कर रहे हैं।
• अनुरोध करने के लिए आप जिस विधि का उपयोग कर रहे हैं (इस मामले में, POST)
• वह डेटा जिसे आप सर्वर को भेजना चाहते हैं

यहां एक कोड स्निपेट है जो JSONPlaceholder API का उपयोग करके एक नई टिप्पणी बनाएगा:

const data = {
	name: "Leslie Tudor",
	email: "leslie.tudor@email.com",
	body: "This is an example post by Career Karma!",
	postId: 1
}

const options = {
	method: "POST",
	body: JSON.stringify(data),
	headers: {
		"Content-Type": "application/json"
	}
};

fetch('https://jsonplaceholder.typicode.com/comments', options)
  .then(response => response.json())
  .then(json => console.log(json))

हमारा कोड हमारी नव-निर्मित पोस्ट को JSON प्रारूप में लौटाता है:

{ body: "This is an example post by Career Karma!", email: "leslie.tudor@email.com", id: 501, name: "Leslie Tudor", postId: 1 }

हमारे कोड में, हम पहले डेटा ऑब्जेक्ट घोषित करते हैं। यह उस डेटा को स्टोर करता है जिसे हम सर्वर पर भेजना चाहते हैं। इस मामले में, हम लेस्ली ट्यूडर नामक एक उपयोगकर्ता द्वारा की गई टिप्पणी के बारे में डेटा भेज रहे हैं।

फिर हम एक और ऑब्जेक्ट घोषित करते हैं जो हमारे फ़ेच अनुरोध से जुड़े विकल्पों को संग्रहीत करता है। यह ऑब्जेक्ट उस विधि को निर्दिष्ट करता है जिसका उपयोग हम अपना अनुरोध (POST) करने के लिए कर रहे हैं, वह डेटा जिसे हम भेजना चाहते हैं, साथ ही हेडर जिसे हम भेजना चाहते हैं।

अंत में, हम fetch() . का उपयोग करते हैं वास्तव में हमारा अनुरोध करने का तरीका। हमारे पहले उदाहरण की तरह, हम .then() . का उपयोग करते हैं प्रतिक्रिया को पुनः प्राप्त करने के तरीके, इसे JSON में परिवर्तित करें, फिर इसे कंसोल पर प्रिंट करें।

जावास्क्रिप्ट फ़ेच का उपयोग करके त्रुटियों को कैसे प्रबंधित करें

यह एक दुर्भाग्यपूर्ण तथ्य है कि कुछ वेब अनुरोध अपेक्षानुसार काम नहीं करते हैं। हो सकता है कि डेटा गलत तरीके से संरचित किया गया हो, या हो सकता है कि कोई सर्वर समस्या हो। यह महत्वपूर्ण है कि हम इन घटनाओं का पहले से ही अनुमान लगा लें ताकि जब भी वे हों तो हम उन्हें संभाल सकें।

.catch() . नामक एक विधि है जिसका उपयोग आप अपने कोड द्वारा लौटाई गई किसी भी त्रुटि को पकड़ने के लिए कर सकते हैं। Promise.reject() . के साथ संयुक्त विधि, आप इसका उपयोग त्रुटियों को संभालने के लिए कर सकते हैं:

fetch('https://jsonplaceholder.typicode.com/comments/999, options)
  .then(response => {
	if (response.ok) {
		console.log(response.json());
		return response.json();
	} else {
		return Promise.reject({ statusText: response.statusText })
	}
})
.catch(error => console.log("ERROR:", error.statusText));

यह कोड लौटाता है:

"ERROR:", "Not Found"

हमारे कोड में, हमने यह जांचने के लिए response.ok विधि का उपयोग किया है कि हमारा अनुरोध सफल हुआ है या नहीं। इस उदाहरण में, हमने एक टिप्पणी प्राप्त करने का प्रयास किया है जो मौजूद नहीं है, टिप्पणी #999। यह हमारे else . की सामग्री का कारण बनता है निष्पादित किया जाने वाला कथन, जो एक अस्वीकृत वादा लौटाता है। इस वादे में JSONPlaceholder API द्वारा लौटाया गया त्रुटि संदेश है।

हमने तब एक .catch() . का उपयोग किया है इस त्रुटि को प्राप्त करने और इसे कंसोल पर प्रिंट करने के लिए कथन।

निष्कर्ष

फ़ेच एपीआई जावास्क्रिप्ट में वेब अनुरोध करना आसान बनाता है। एपीआई वैनिला जावास्क्रिप्ट का हिस्सा है इसलिए किसी पुस्तकालय को स्थापित या संदर्भित करने की कोई आवश्यकता नहीं है। इसके अलावा, आप GET, POST, PUT और DELETE अनुरोध करने के लिए फ़ेच एपीआई का उपयोग कर सकते हैं।

अब आप एक पेशेवर डेवलपर की तरह फ़ेच एपीआई का उपयोग करके वेब अनुरोध करना शुरू करने के लिए तैयार हैं!