S10L10 - Async और Await

html

Async और Await में महारत हासिल करना: JavaScript में एक व्यापक मार्गदर्शिका
विषय सूची

परिचय
Asynchronous JavaScript को समझना

Fetch API और इसकी सीमाएँ


Async और Await का परिचय

Async और Await क्या हैं?
Async और Await के उपयोग के लाभ


Async और Await को लागू करना

मूल सिंटैक्स और उपयोग
Responses को संभालना


व्यावहारिक उदाहरण: Async और Await का उपयोग करके डेटा प्राप्त करना

कोड का चरण-दर-चरण विवरण
आउटपुट और परिणाम


श्रेष्ठ अभ्यास
निष्कर्ष
अतिरिक्त संसाधन

परिचय
आधुनिक वेब विकास के क्षेत्र में, asynchronous operations का कुशल प्रबंधन महत्वपूर्ण है। JavaScript, जो कि एक single-threaded भाषा है, मुख्य थ्रेड को ब्लॉक किए बिना डेटा प्राप्ति, फाइल पढ़ने और अन्य कार्यों को संभालने के लिए asynchronous प्रोग्रामिंग पर भारी निर्भर करता है।
परंपरागत रूप से, Fetch API, जो .then() promises के साथ मिलकर asynchronous operations को संभालने का प्रमुख तरीका रहा है। हालांकि, जैसे-जैसे एप्लिकेशन की जटिलता बढ़ती है, यह दृष्टिकोण convoluted और maintain करने में कठिन कोड की ओर ले जा सकता है। Enter Async और Await—JavaScript की नए सुविधाएँ जो cleaner, अधिक पठनीय asynchronous कोड का वादा करती हैं।
यह eBook Async और Await की जटिलताओं में गहराई से गोता लगाता है, यह दर्शाता है कि यह कैसे JavaScript में asynchronous operations को सरल बनाते हैं, जिससे developer अनुभव और कोड गुणवत्ता दोनों में सुधार होता है।
Asynchronous JavaScript को समझना
Fetch API और इसकी सीमाएँ
Fetch API ने JavaScript में HTTP requests को संभालने के तरीके में क्रांतिक बदलाव लाया है, जिससे संसाधनों को प्राप्त करने के लिए एक आधुनिक इंटरफेस प्रदान किया गया है। इसके उपयोग का एक त्वरित अवलोकन यहाँ दिया गया है:




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

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


प्रभावी होने के बावजूद, कई .then() विधियों को श्रृंखलाबद्ध करना जल्दी ही अत्यधिक जटिल हो सकता है, खासकर जब जटिल operations या कई asynchronous calls के साथ काम कर रहे हों। यह "callback hell" कोड को पढ़ने और बनाए रखने में कठिन बनाता है।
Async और Await का परिचय
Async और Await क्या हैं?
Async और Await JavaScript Promises पर आधारित सिंटैक्स शुगर हैं, जिन्हें ECMAScript 2017 (ES8) में पेश किया गया था। वे asynchronous कोड लिखने का एक अधिक सरल और पठनीय तरीका प्रदान करते हैं।

Async: एक कीवर्ड जिसका उपयोग asynchronous function घोषित करने के लिए किया जाता है। यह सुनिश्चित करता है कि function एक Promise लौटाता है।
Await: एक कीवर्ड जिसका उपयोग async function के अंदर execution को तब तक रोकने के लिए किया जाता है जब तक कि Promise settle (either fulfilled या rejected) न हो जाए।

Async और Await के उपयोग के लाभ

पठनीयता: कोड synchronous प्रतीत होता है, जिससे इसे फॉलो करना और समझना आसान होता है।
Error Handling: try...catch blocks का उपयोग करके error handling को सरल बनाता है।
Maintainability: कई .then() chains से जुड़ी जटिलता को कम करता है।

Async और Await को लागू करना
मूल सिंटैक्स और उपयोग
यहाँ एक asynchronous function घोषित करने और इसमें await का उपयोग करने का तरीका दिया गया है:




		
		
			
			
Java
			
			
const fetchData = async () => {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  return data;
};

			
				
					
				
					1
2
3
4
5
6
7
				
						 
const fetchData = async () => {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  return data;
};
 
					
				
			
		


इस उदाहरण में:

fetchData एक asynchronous function है।
await execution को तब तक रोकता है जब तक कि fetch Promise resolve नहीं हो जाता।
Function अंततः fetched data लौटाता है।

Responses को संभालना
Responses को संभालना समझना महत्वपूर्ण है। चलिए प्रक्रिया को टूटते हैं:

डेटा प्राप्त करना: fetch का उपयोग करके एक HTTP request बनाएं।
Response का Await करना: Response प्राप्त होने तक execution को रोकें।
डेटा को पार्स करना: कच्चे response को JSON में बदलें।
डेटा लौटाना: एप्लिकेशन के अन्य हिस्सों के लिए डेटा को सुलभ बनाएं।

व्यावहारिक उदाहरण: Async और Await का उपयोग करके डेटा प्राप्त करना
आइए एक व्यावहारिक उदाहरण से अपने समझ को मजबूत करें।
कोड का चरण-दर-चरण विवरण
यहाँ प्रदान की गई transcript पर आधारित पूरा कोड दिया गया है:




		
		
			
			
Java
			
			
const info = async () => {
  console.log('Hello World'); // Line 6
  const response = await fetch('https://api.example.com/data'); // Line 7
  const data = await response.json();
  return data;
};

info().then(data => {
  console.log(data); // Displaying the fetched data
});

			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
				
						 
const info = async () => {
  console.log('Hello World'); // Line 6
  const response = await fetch('https://api.example.com/data'); // Line 7
  const data = await response.json();
  return data;
};
 
info().then(data => {
  console.log(data); // Displaying the fetched data
});
 
					
				
			
		


व्याख्या:

Async Function घोषित करना:

    



		
		
			
			
Java
			
			
const info = async () => {
    
			
				
					
				
					1
2
3
				
						 
const info = async () => {
    
					
				
			
		



info एक asynchronous arrow function है।


एक Message लॉग करना:

    



		
		
			
			
Java
			
			
console.log('Hello World'); // Line 6
    
			
				
					
				
					1
2
3
				
						 
console.log('Hello World'); // Line 6
    
					
				
			
		



कंसोल पर "Hello World" आउटपुट करता है।


Await के साथ डेटा प्राप्त करना:

    



		
		
			
			
Java
			
			
const response = await fetch('https://api.example.com/data'); // Line 7
    
			
				
					
				
					1
2
3
				
						 
const response = await fetch('https://api.example.com/data'); // Line 7
    
					
				
			
		



निर्दिष्ट URL पर एक HTTP GET request बनाता है।
जब तक fetch Promise resolve नहीं होता, execution को रोकता है।


JSON Response को पार्स करना:

    



		
		
			
			
Java
			
			
const data = await response.json();
    
			
				
					
				
					1
2
3
				
						 
const data = await response.json();
    
					
				
			
		



कच्चे response को JSON प्रारूप में बदलता है।
json() Promise के समाधान का इंतजार करता है।


डेटा लौटाना:

    



		
		
			
			
Java
			
			
return data;
    
			
				
					
				
					1
2
3
				
						 
return data;
    
					
				
			
		



Function parsed JSON data लौटाता है।


लौटे Promise को संभालना:

    



		
		
			
			
Java
			
			
info().then(data => {
  console.log(data); // Displaying the fetched data
});
    
			
				
					
				
					1
2
3
4
5
				
						 
info().then(data => {
  console.log(data); // Displaying the fetched data
});
    
					
				
			
		



info function को कॉल करता है।
.then() का उपयोग करके resolved data को संभालता है और इसे कंसोल पर लॉग करता है।



कोड में टिप्पणियाँ:




		
		
			
			
Java
			
			
const info = async () => {
  console.log('Hello World'); // एक greeting message लॉग करता है
  const response = await fetch('https://api.example.com/data'); // API से डेटा प्राप्त करता है
  const data = await response.json(); // response को JSON के रूप में पार्स करता है
  return data; // parsed data लौटाता है
};

info().then(data => {
  console.log(data); // fetched data को कंसोल पर लॉग करता है
});

			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
				
						 
const info = async () => {
  console.log('Hello World'); // एक greeting message लॉग करता है
  const response = await fetch('https://api.example.com/data'); // API से डेटा प्राप्त करता है
  const data = await response.json(); // response को JSON के रूप में पार्स करता है
  return data; // parsed data लौटाता है
};
 
info().then(data => {
  console.log(data); // fetched data को कंसोल पर लॉग करता है
});
 
					
				
			
		


आउटपुट और परिणाम
ऊपर दिए गए कोड को निष्पादित करने पर:

Console Output:

    



		
		
			
			
Java
			
			Hello World
			
				
					
				
					1
				
						Hello World
					
				
			
		


  
Fetched Data:

    



		
		
			
			
Java
			
			
{
  "id": 1,
  "name": "Sample Data",
  "description": "This is a sample response from the API."
}
    
			
				
					
				
					1
2
3
4
5
6
7
				
						 
{
  "id": 1,
  "name": "Sample Data",
  "description": "This is a sample response from the API."
}
    
					
				
			
		


  

व्याख्या:

"Hello World" तुरंत लॉग होता है, जो asynchronous operation की शुरुआत को संकेत करता है।
Fetch request पूरा होने और JSON पार्स होने के बाद, वास्तविक डेटा लॉग होता है, जो जानकारी की सफल प्राप्ति को दर्शाता है।

श्रेष्ठ अभ्यास

Error Handling के लिए try...catch का उपयोग करें:

    



		
		
			
			
Java
			
			
const fetchData = async () => {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('डेटा प्राप्त करने में त्रुटि:', error);
  }
};
    
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
				
						 
const fetchData = async () => {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('डेटा प्राप्त करने में त्रुटि:', error);
  }
};
    
					
				
			
		


  
Async/Await को .then() के साथ मिलाने से बचें: स्थिरता के लिए एक दृष्टिकोण पर चिपके रहें।
सभी Promises को संभालें: सुनिश्चित करें कि हर Promise को या तो awaited किया गया हो या ठीक से संभाला गया हो ताकि unhandled rejections से बचा जा सके।
Async Functions को सरल रखें: जटिल operations को छोटे functions में विभाजित करें ताकि पठनीयता बनी रहे।

निष्कर्ष
Async और Await ने JavaScript में asynchronous प्रोग्रामिंग के परिदृश्य को बदल दिया है। Developers को synchronous दिखने और व्यवहार करने वाला कोड लिखने की अनुमति देकर, यह asynchronous operations के प्रबंधन को सरल बनाता है, जिससे कोड अधिक पठनीय और maintainable बनता है। इन आधुनिक सुविधाओं को अपनाने से न केवल कोड गुणवत्ता में सुधार होता है, बल्कि यह आधुनिक JavaScript के श्रेष्ठ प्रथाओं के अनुरूप भी होता है।
SEO Keywords: JavaScript Async Await, asynchronous programming, Fetch API, promises, async functions, await keyword, JavaScript best practices, handling asynchronous operations, modern JavaScript, async await tutorial
अतिरिक्त संसाधन

MDN Web Docs: Async Function
MDN Web Docs: Await
JavaScript Promises: An Introduction
ES8 Async/Await Explained
Handling Errors in Async Functions

Note: यह लेख AI द्वारा उत्पन्न किया गया है।