S10L09 - द फेच एपीआई

html

JavaScript में Fetch API में महारत हासिल करना: एक व्यापक मार्गदर्शिका
सामग्री तालिका


विषय
पेज नंबर


परिचय
1


Fetch API को समझना
3


प्रॉमिसेस को .then() और .catch() के साथ संभालना
7


JSON डेटा को प्रोसेस करना
12


असिंक्रोनस बनाम सिंक्रोनस ऑपरेशन्स
16


Async/Await के साथ कोड को बढ़ाना
20


निष्कर्ष
24



परिचय
वेब विकास के लगातार विकसित हो रहे परिदृश्य में, नेटवर्क अनुरोधों को कुशलतापूर्वक संभालना अत्यंत महत्वपूर्ण है। JavaScript में Fetch API एक शक्तिशाली और लचीला तरीका प्रदान करता है असिंक्रोनस HTTP अनुरोध करने का, जो पुराने तरीकों जैसे XMLHttpRequest की जगह लेता है। यह गाइड Fetch API की जटिलताओं में गहराई से प्रवेश करती है, इसके उपयोग, प्रॉमिसेस को संभालने, JSON डेटा को प्रोसेस करने, और आधुनिक JavaScript सुविधाओं के साथ असिंक्रोनस ऑपरेशन्स को अनुकूलित करने का अध्ययन करती है।
Fetch API को समझना उन डेवलपर्स के लिए आवश्यक है जो डायनेमिक, प्रतिक्रियाशील वेब अनुप्रयोग बनाने का लक्ष्य रखते हैं। यह व्यापक गाइड बुनियादी अवधारणाओं को कवर करती है, व्यावहारिक कोड उदाहरण प्रदान करती है, और सर्वोत्तम प्रथाओं में अंतर्दृष्टि देती है, यह सुनिश्चित करती है कि आपके प्रोजेक्ट्स में नेटवर्क कॉल्स को प्रभावी ढंग से लागू करने का ज्ञान आपके पास हो।


विषय
पेज नंबर


परिचय
1


Fetch API अवलोकन
3


प्रॉमिसेस को .then() और .catch() के साथ संभालना
7


JSON डेटा को प्रोसेस करना
12


असिंक्रोनस बनाम सिंक्रोनस ऑपरेशन्स
16


Async/Await के साथ कोड को बढ़ाना
20


निष्कर्ष
24



Fetch API को समझना
Fetch API क्या है?
Fetch API संसाधनों को लाने (नेटवर्क पार सहित) के लिए एक आधुनिक इंटरफेस प्रदान करता है। यह सर्वरों पर असिंक्रोनस HTTP अनुरोध बनाने में सुविधा प्रदान करता है, जिससे वेब अनुप्रयोग बिना पेज को रीलोड किए डेटा को गतिशील रूप से पुनः प्राप्त और संशोधित कर सकते हैं।
Fetch API का उपयोग क्यों करें?

प्रॉमिस-आधारित: XMLHttpRequest के विपरीत, Fetch प्रॉमिस का उपयोग करता है, जिससे असिंक्रोनस कोड लिखना और प्रबंधित करना आसान हो जाता है।
सरलित सिंटैक्स: Fetch नेटवर्क अनुरोध करने के लिए एक साफ और अधिक सहज सिंटैक्स प्रदान करता है।
बढ़ी हुई सुविधाएँ: यह विभिन्न प्रकार के अनुरोधों का समर्थन करता है और अनुरोध और प्रतिक्रिया स्ट्रीम जैसी सुविधाओं को शामिल करता है।

Fetch API का उपयोग कब करें
Fetch API के लिए आदर्श है:

APIs से डेटा पुनः प्राप्त करना
फॉर्म डेटा जमा करना
संसाधनों को गतिशील रूप से लोड करना
JavaScript में नेटवर्क संचार की आवश्यकता वाले कोई भी परिदृश्य

Fetch API के फायदे और नुकसान


फायदे
नुकसान


आधुनिक, प्रॉमिस-आधारित दृष्टिकोण
प्रोग्रेस इंडिकेटर्स का समर्थन नहीं करता


स्वच्छ और अधिक पठनीय सिंटैक्स
पुराने ब्राउज़रों के लिए अतिरिक्त हैंडलिंग की आवश्यकता होती है


प्रतिक्रियाओं को संभालने के लिए लचीला और शक्तिशाली
त्रुटि हैंडलिंग प्रारंभ में कम सहज हो सकती है



प्रॉमिसेस को .then() और .catch() के साथ संभालना
प्रॉमिसेस को समझना
JavaScript में प्रॉमिसेस एक असिंक्रोनस ऑपरेशन की अंतिम पूर्ति (या विफलता) और इसके परिणामस्वरूप मूल्य को दर्शाते हैं। यह असिंक्रोनस कोड को संभालने का एक संरचित तरीका प्रदान करते हैं, कुख्यात "कॉलबैक हेल" से बचते हैं।
.then() का उपयोग करके सफलता को संभालना
.then() विधि प्रॉमिस के पूर्ण स्थिति को संभालने के लिए उपयोग की जाती है। यह दो तर्क ले सकता है: पूर्ण मामले के लिए एक कॉलबैक, और वैकल्पिक रूप से, अस्वीकृत मामले के लिए एक कॉलबैक।




		
		
			
			
Java
			
			fetch('https://api.example.com/data')
  .then(response => {
    console.log(response);
  });

			
				
					
				
					1
2
3
4
5
				
						fetch('https://api.example.com/data')
  .then(response => {
    console.log(response);
  });
 
					
				
			
		


व्याख्या:

fetch: निर्दिष्ट URL पर एक नेटवर्क अनुरोध शुरू करता है।
response: सर्वर की प्रतिक्रिया का प्रतिनिधित्व करने वाला प्रतिक्रिया ऑब्जेक्ट।

.catch() के साथ त्रुटियों को पकड़ना
.catch() विधि अस्वीकृत अवस्थाओं को संभालती है, जिससे आप त्रुटियों को सहजता से प्रबंधित कर सकते हैं।




		
		
			
			
Java
			
			fetch('https://api.example.com/data')
  .then(response => {
    console.log(response);
  })
  .catch(error => {
    console.log('Error:', error);
  });

			
				
					
				
					1
2
3
4
5
6
7
8
				
						fetch('https://api.example.com/data')
  .then(response => {
    console.log(response);
  })
  .catch(error => {
    console.log('Error:', error);
  });
 
					
				
			
		


व्याख्या:

error: त्रुटि ऑब्जेक्ट जिसमें यह विवरण होता है कि क्या गलत हुआ।

कदम-दर-कदम विश्लेषण

Fetch शुरू करें: API एन्डपॉइंट पर GET अनुरोध करें।
प्रतिक्रिया को संभालें: प्रतिक्रिया ऑब्जेक्ट को कंसोल में लॉग करें।
त्रुटि हैंडलिंग: यदि अनुरोध विफल होता है, तो त्रुटि संदेश को लॉग करें।

सामान्य गलतियाँ

अपूर्ण प्रॉमिसेस: प्रतिक्रिया को तुरंत लॉग करना यदि सही ढंग से नहीं संभाला गया तो एक लंबित प्रॉमिस दिखा सकता है।
.catch() की कमी: बिना catch ब्लॉक के, त्रुटियाँ अनदेखी हो सकती हैं, जिससे बिना हैंडल किए प्रॉमिस अस्वीकृत हो सकते हैं।


JSON डेटा को प्रोसेस करना
प्रतिक्रिया से JSON निकालना
अक्सर, APIs JSON प्रारूप में डेटा लौटाते हैं। इस डेटा को निकालने और उपयोग करने के लिए, आपको प्रतिक्रिया को पार्स करना चाहिए।




		
		
			
			
Java
			
			fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.log('Error:', error);
  });

			
				
					
				
					1
2
3
4
5
6
7
8
9
				
						fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.log('Error:', error);
  });
 
					
				
			
		


व्याख्या:

response.json(): प्रतिक्रिया को JSON के रूप में पार्स करता है, जो एक और प्रॉमिस लौटाता है।
data: प्रतिक्रिया से पार्स किया गया JSON डेटा।

नेस्टेड प्रॉमिसेस को संभालना
चूंकि response.json() एक प्रॉमिस लौटाता है, आप पार्स किए गए डेटा को संभालने के लिए एक और .then() चेन करते हैं।




		
		
			
			
Java
			
			fetch('https://api.example.com/data')
  .then(response => {
    return response.json();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.log('Error:', error);
  });

			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
				
						fetch('https://api.example.com/data')
  .then(response => {
    return response.json();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.log('Error:', error);
  });
 
					
				
			
		


कदम-दर-कदम प्रक्रिया

डेटा प्राप्त करें: प्रारंभिक नेटवर्क अनुरोध करें।
JSON पार्स करें: प्रतिक्रिया को JSON में परिवर्तित करें।
डेटा प्रोसेस करें: आवश्यकतानुसार पार्स किए गए डेटा का उपयोग करें।
त्रुटियाँ संभालें: फेच या पार्सिंग चरणों के दौरान उत्पन्न होने वाली किसी भी त्रुटि को प्रबंधित करें।

उदाहरण आउटपुट
मान लीजिए कि API निम्न JSON लौटाता है:




		
		
			
			
Java
			
			{
  "id": 1,
  "name": "John Doe",
  "email": "john.doe@example.com"
}

			
				
					
				
					1
2
3
4
5
6
				
						{
  "id": 1,
  "name": "John Doe",
  "email": "john.doe@example.com"
}
 
					
				
			
		


कंसोल आउटपुट होगा:




		
		
			
			
Java
			
			{
  id: 1,
  name: "John Doe",
  email: "john.doe@example.com"
}

			
				
					
				
					1
2
3
4
5
6
				
						{
  id: 1,
  name: "John Doe",
  email: "john.doe@example.com"
}
 
					
				
			
		


सर्वोत्तम प्रथाएँ

प्रतिक्रियाओं को मान्य करें: पार्स करने से पहले हमेशा जांचें कि प्रतिक्रिया ठीक है या नहीं।





		
		
			
			
Java
			
			fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.log('Error:', error);
  });

			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
				
						fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.log('Error:', error);
  });
 
					
				
			
		



एज केस संभालें: उन परिदृश्यों पर विचार करें जहां प्रतिक्रिया JSON नहीं हो सकती है या खाली हो सकती है।


असिंक्रोनस बनाम सिंक्रोनस ऑपरेशन्स
असिंक्रोनस ऑपरेशन्स को समझना
असिंक्रोनस ऑपरेशन्स एक प्रोग्राम को काम जारी रखने की अनुमति देते हैं जबकि एक कार्य के पूरा होने का इंतजार करता है। JavaScript में, नेटवर्क अनुरोध अंतर्निहित रूप से असिंक्रोनस होते हैं, जिसका अर्थ है कि कोड अवरोधित नहीं होता है और एक साथ अन्य कार्य कर सकता है।
सिंक्रोनस ऑपरेशन्स
सिंक्रोनस ऑपरेशन्स तब तक निष्पादन थ्रेड को अवरुद्ध कर देते हैं जब तक कि कार्य पूरा नहीं हो जाता। यह प्रदर्शन की बाधाओं का कारण बन सकता है, विशेष रूप से लंबे समय चलने वाले कार्यों जैसे नेटवर्क अनुरोधों के साथ।
असिंक्रोनस संदर्भ में Fetch API
Fetch API का उपयोग करते हुए, नेटवर्क कॉल्स असिंक्रोनस रूप से किए जाते हैं। कोड निष्पादन में इसका प्रभाव इस प्रकार होता है:




		
		
			
			
Java
			
			console.log('Start');

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    console.log('Data received:', data);
  });

console.log('End');

			
				
					
				
					1
2
3
4
5
6
7
8
9
10
				
						console.log('Start');
 
fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    console.log('Data received:', data);
  });
 
console.log('End');
 
					
				
			
		


अपेक्षित कंसोल आउटपुट:




		
		
			
			
Java
			
			Start
End
Data received: { id: 1, name: "John Doe", email: "john.doe@example.com" }

			
				
					
				
					1
2
3
4
				
						Start
End
Data received: { id: 1, name: "John Doe", email: "john.doe@example.com" }
 
					
				
			
		


व्याख्या:

Start: तुरंत लॉग किया जाता है।
End: फेच पूरा होने से पहले लॉग किया जाता है।
Data received: असिंक्रोनस फेच पूरा होने के बाद लॉग किया जाता है।

असिंक्रोनस निष्पादन के प्रभाव

गैर-अवरुद्ध: मुख्य थ्रेड प्रॉमिस के हल होने की प्रतीक्षा करते हुए अन्य कार्यों को संभालने के लिए स्वतंत्र रहता है।
निष्पादन का क्रम: असिंक्रोनस कॉल के बाद का कोड प्रॉमिस के हल होने से पहले निष्पादित होता है, जिससे यदि सही ढंग से प्रबंधित नहीं किया गया तो अप्रत्याशित व्यवहार हो सकता है।

असिंक्रोनस कोड को प्रबंधित करना
असिंक्रोनस कोड को ठीक से संभालना यह सुनिश्चित करता है कि ऑपरेशन्स वांछित क्रम में घटित हों, अज्ञात डेटा तक पहुँचने या रेस कंडीशन्स जैसी समस्याओं को रोकते हुए।

Async/Await के साथ कोड को बढ़ाना
Async/Await का परिचय
जबकि प्रॉमिसेस असिंक्रोनस ऑपरेशन्स को संभालने का एक संरचित तरीका प्रदान करते हैं, async और await कीवर्ड एक अधिक पठनीय और सीधी सिंटैक्स प्रदान करते हैं, जो सिंक्रोनस कोड के समान होता है।
Async/Await के साथ Fetch को रिफैक्टर करना




		
		
			
			
Java
			
			async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    const data = await response.json();
    console.log('Data received:', data);
  } catch (error) {
    console.log('Error:', error);
  }
}

fetchData();

			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
				
						async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    const data = await response.json();
    console.log('Data received:', data);
  } catch (error) {
    console.log('Error:', error);
  }
}
 
fetchData();
 
					
				
			
		


व्याख्या:

async function: एक असिंक्रोनस फंक्शन घोषित करता है।
await fetch: फेच प्रॉमिस के हल होने की प्रतीक्षा करता है।
await response.json(): JSON पार्सिंग पूरा होने की प्रतीक्षा करता है।
try/catch: त्रुटियों को सहजता से संभालता है।

Async/Await के फायदे

पठनीयता: कोड एक शीर्ष-डाउन तरीके से प्रवाहित होता है, जिससे इसे समझना आसान होता है।
त्रुटि हैंडलिंग: try/catch ब्लॉकों का उपयोग करके त्रुटियों को संभालना सरल बनाता है।
डिबगिंग: असिंक्रोनस कोड को डिबग करना आसान होता है क्योंकि यह सिंक्रोनस निष्पादन की तरह होता है।

प्रॉमिसेस और Async/Await की तुलना


प्रॉमिसेस (.then()/.catch())
Async/Await


.then() ब्लॉकों की चेनिंग की आवश्यकता होती है
क्रमिक, शीर्ष-डाउन कोड संरचना


नेस्टेड हो सकती हैं और प्रबंधित करना कठिन हो सकता है
जटिल फ्लोज़ के लिए स्वच्छ और अधिक पठनीय


.catch() के साथ त्रुटि हैंडलिंग
try/catch के साथ एकीकृत त्रुटि हैंडलिंग


व्यावहारिक उदाहरण
प्रॉमिसेस का उपयोग:




		
		
			
			
Java
			
			fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    console.log('Data received:', data);
  })
  .catch(error => {
    console.log('Error:', error);
  });

			
				
					
				
					1
2
3
4
5
6
7
8
9
				
						fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    console.log('Data received:', data);
  })
  .catch(error => {
    console.log('Error:', error);
  });
 
					
				
			
		


Async/Await का उपयोग:




		
		
			
			
Java
			
			async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log('Data received:', data);
  } catch (error) {
    console.log('Error:', error);
  }
}

fetchData();

			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
				
						async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log('Data received:', data);
  } catch (error) {
    console.log('Error:', error);
  }
}
 
fetchData();
 
					
				
			
		


Async/Await के साथ सर्वोत्तम प्रथाएँ

हमेशा Try/Catch का उपयोग करें: संभावित त्रुटियों को सहजता से संभालने के लिए।
ब्लॉकिंग कोड से बचें: Async/Await के साथ भी, सुनिश्चित करें कि आप सिंक्रोनस ऑपरेशन्स के साथ मुख्य थ्रेड को अवरुद्ध नहीं करते हैं।
जरूरत होने पर ही फंक्शन्स को Async रखें: केवल उन फंक्शन्स पर async का उपयोग करें जो असिंक्रोनस ऑपरेशन्स करते हैं ताकि स्पष्टता बनी रहे।


निष्कर्ष
Fetch API आधुनिक JavaScript डेवलपर्स के लिए एक अनिवार्य उपकरण है, जो नेटवर्क अनुरोध करने का एक ठोस और लचीला तरीका प्रदान करता है। .then() और .catch() के साथ प्रॉमिसेस का लाभ उठाकर, डेवलपर्स असिंक्रोनस ऑपरेशन्स को प्रभावी ढंग से संभाल सकते हैं। इसके अलावा, async और await के परिचय ने असिंक्रोनस कोड को और भी सरल बना दिया है, जिससे यह अधिक पठनीय और बनाए रखने योग्य हो गया है।
इस गाइड से मुख्य सीख निम्नलिखित हैं:

प्रॉमिसेस को समझना: यह समझना कि प्रॉमिसेस कैसे काम करते हैं, असिंक्रोनस ऑपरेशन्स को प्रबंधित करने के लिए मौलिक है।
प्रभावी त्रुटि हैंडलिंग: .catch() और try/catch ब्लॉकों का उपयोग यह सुनिश्चित करता है कि त्रुटियाँ सहजता से प्रबंधित होती हैं।
डेटा प्रोसेसिंग: JSON डेटा को पार्स करना और उपयोग करना APIs के साथ इंटरैक्ट करने के लिए आवश्यक है।
Async/Await: async और await को अपनाने से कोड अधिक स्वच्छ और अधिक सहज बन सकता है।

जैसे-जैसे वेब अनुप्रयोगों की जटिलता बढ़ती है, Fetch API और असिंक्रोनस JavaScript में महारत हासिल करना महत्वपूर्ण है। इस गाइड में उल्लिखित प्रथाओं को लागू करके, डेवलपर्स कुशल, प्रतिक्रियाशील, और उपयोगकर्ता-मित्रवत अनुप्रयोग बना सकते हैं।

Nota: यह लेख AI द्वारा जनरेट किया गया है।
विषय	पेज नंबर
परिचय	1
Fetch API को समझना	3
प्रॉमिसेस को .then() और .catch() के साथ संभालना	7
JSON डेटा को प्रोसेस करना	12
असिंक्रोनस बनाम सिंक्रोनस ऑपरेशन्स	16
Async/Await के साथ कोड को बढ़ाना	20
निष्कर्ष	24
विषय	पेज नंबर
परिचय	1
Fetch API अवलोकन	3
प्रॉमिसेस को .then() और .catch() के साथ संभालना	7
JSON डेटा को प्रोसेस करना	12
असिंक्रोनस बनाम सिंक्रोनस ऑपरेशन्स	16
Async/Await के साथ कोड को बढ़ाना	20
निष्कर्ष	24
फायदे	नुकसान
आधुनिक, प्रॉमिस-आधारित दृष्टिकोण	प्रोग्रेस इंडिकेटर्स का समर्थन नहीं करता
स्वच्छ और अधिक पठनीय सिंटैक्स	पुराने ब्राउज़रों के लिए अतिरिक्त हैंडलिंग की आवश्यकता होती है
प्रतिक्रियाओं को संभालने के लिए लचीला और शक्तिशाली	त्रुटि हैंडलिंग प्रारंभ में कम सहज हो सकती है
प्रॉमिसेस (.then()/.catch())	Async/Await
.then() ब्लॉकों की चेनिंग की आवश्यकता होती है	क्रमिक, शीर्ष-डाउन कोड संरचना
नेस्टेड हो सकती हैं और प्रबंधित करना कठिन हो सकता है	जटिल फ्लोज़ के लिए स्वच्छ और अधिक पठनीय
.catch() के साथ त्रुटि हैंडलिंग	try/catch के साथ एकीकृत त्रुटि हैंडलिंग