क्या आप जानते हैं कि आप वैनिला JavaScript में वेब अनुरोध कर सकते हैं? यह सही है, वेब अनुरोध करने के लिए आपको कोई लाइब्रेरी इंस्टॉल करने की आवश्यकता नहीं है। इतना ही नहीं: हम पुराने, जटिल XMLHttpRequest टूल के बारे में बात नहीं कर रहे हैं।
Fetch API आपको सादे पुराने JavaScript में Ajax अनुरोध करने की अनुमति देता है। यह वेब सर्वर पर डेटा पुनर्प्राप्त करने और डेटा में परिवर्तन करने के लिए एक उपयोगी टूल है।
इस गाइड में, हम चर्चा करने जा रहे हैं कि Fetch API क्या है और आप API का उपयोग करके वेब अनुरोध कैसे कर सकते हैं। हम दो उदाहरणों के माध्यम से बात करेंगे: एक GET अनुरोध और एक POST अनुरोध।
Fetch API क्या है?
JavaScript लंबे समय से नेटवर्क अनुरोध भेजने में सक्षम है। XMLHTTPRequest टूल ने सर्वर से डेटा पुनर्प्राप्त करने और सर्वर से जानकारी अपडेट करने के लिए आवश्यक संसाधन प्रदान किए।
जबकि यह टूल प्रभावी था, यह काफी वर्बोज़ और उपयोग करने में जटिल भी था। दूसरी ओर, Fetch एक नया विकल्प है जो वेब अनुरोध करना सरल बनाता है।
Fetch API सभी आधुनिक ब्राउज़रों में समर्थित है। इसका मतलब है कि एक बार जब आप इसका उपयोग करना सीख जाते हैं, तो वेब अनुरोध करते समय आपको ब्राउज़र संगतता के बारे में चिंता करने की आवश्यकता नहीं होगी।
Fetch का उपयोग करके GET अनुरोध कैसे करें
Fetch कैसे काम करता है इसे समझाने का सबसे अच्छा तरीका उदाहरण है। इस ट्यूटोरियल के लिए, हम वेब सेवा JSONPlaceholder का उपयोग करने जा रहे हैं। यह एक API है जो पूर्व-लिखित डमी डेटा के साथ आता है जिसका उपयोग हम अपने वेब अनुरोधों का परीक्षण करने के लिए कर सकते हैं।
निम्न कोड JSONPlaceholder से पहली पोस्ट पुनर्प्राप्त करने के लिए एक GET अनुरोध बनाता है:
fetch('https://jsonplaceholder.typicode.com/posts/1')
.then(response => response.json())
.then(json => console.log(json))
यह कोड लौटाता है:
{
body: "quia et 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
}
आइए अपने कोड को समझते हैं। पहली पंक्ति पर, हमने JSONPlaceholder API पर वेब अनुरोध शुरू करने के लिए fetch() मेथड का उपयोग किया है। फिर हमने अपने कोड को यह बताने के लिए .then() मेथड का उपयोग किया है कि हमारे वेब अनुरोध किए जाने के बाद क्या करना है।
हमारे पहले .then() मेथड में, हम API द्वारा लौटाई गई प्रतिक्रिया को JSON में बदलते हैं। यह हमारे डेटा को अधिक पठनीय बनाता है। हम प्रतिक्रिया को कंसोल पर लॉग करने के लिए एक और .then() मेथड का उपयोग करते हैं। यह हमें JSONPlaceholder API से ID 1 वाली पोस्ट दिखाता है।
POST अनुरोध कैसे करें
GET एकमात्र अनुरोध प्रकार नहीं है जिसे आप Fetch API के साथ कर सकते हैं। POST, PUT, और DELETE अनुरोधों का समर्थन करने वाली कार्यक्षमता भी है। सिंटैक्स समान है, इसलिए हम केवल एक उदाहरण के माध्यम से चलेंगे: POST अनुरोध कैसे करें।
जब आप POST, PUT, या DELETE अनुरोध कर रहे होते हैं, तो आमतौर पर तीन जानकारी होती हैं जिन्हें आपको निर्दिष्ट करने की आवश्यकता होती है:
- वह URL जिस पर आप अनुरोध कर रहे हैं।
- वह मेथड जिसका उपयोग आप अनुरोध करने के लिए कर रहे हैं (इस मामले में, POST)
- वह डेटा जिसे आप सर्वर पर भेजना चाहते हैं
यहाँ एक कोड स्निपेट है जो JSONPlaceholder API का उपयोग करके एक नई टिप्पणी बनाएगा:
const data = {
name: "Leslie Tudor",
email: "leslie.tudor@email.com",
body: "यह 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: "यह Career Karma द्वारा एक उदाहरण पोस्ट है!",
email: "leslie.tudor@email.com",
id: 501,
name: "Leslie Tudor",
postId: 1
}
हमारे कोड में, हम पहले एक डेटा ऑब्जेक्ट घोषित करते हैं। यह वह डेटा संग्रहीत करता है जिसे हम सर्वर पर भेजना चाहते हैं। इस मामले में, हम लेस्ली ट्यूडर नामक उपयोगकर्ता द्वारा की गई टिप्पणी के बारे में डेटा भेज रहे हैं।
हम फिर एक और ऑब्जेक्ट घोषित करते हैं जो हमारे fetch अनुरोध से जुड़े विकल्पों को संग्रहीत करता है। यह ऑब्जेक्ट उस मेथड को निर्दिष्ट करता है जिसका उपयोग हम अपने अनुरोध (POST), हमारे द्वारा भेजे जाने वाले डेटा, साथ ही उन हेडर्स को बनाने के लिए कर रहे हैं जिन्हें हम भेजना चाहते हैं।
अंत में, हम वास्तव में अपना अनुरोध करने के लिए fetch() मेथड का उपयोग करते हैं। हमारे पहले उदाहरण की तरह, हम प्रतिक्रिया प्राप्त करने, इसे JSON में बदलने, फिर इसे कंसोल पर प्रिंट करने के लिए .then() मेथड्स का उपयोग करते हैं।
JavaScript Fetch का उपयोग करके त्रुटियों को कैसे संभालें
यह एक दुर्भाग्यपूर्ण तथ्य है कि कुछ वेब अनुरोध इरादे के अनुसार काम नहीं करते। शायद डेटा गलत तरीके से संरचित है, या शायद सर्वर की समस्या है। इन घटनाओं का पूर्वानुमान लगाना महत्वपूर्ण है ताकि हम उन्हें उत्पन्न होने पर संभाल सकें।
.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() स्टेटमेंट का उपयोग किया है।
निष्कर्ष
Fetch API JavaScript में वेब अनुरोध करना आसान बनाता है। API वैनिला JavaScript का हिस्सा है इसलिए किसी लाइब्रेरी को इंस्टॉल या संदर्भित करने की आवश्यकता नहीं है। क्या अधिक है, आप GET, POST, PUT, और DELETE अनुरोध करने के लिए Fetch API का उपयोग कर सकते हैं।
अब आप एक पेशेवर डेवलपर की तरह Fetch API का उपयोग करके वेब अनुरोध करना शुरू करने के लिए तैयार हैं!
