टाइपस्क्रिप्ट में असिंक/अवेट
यह लेख टाइपस्क्रिप्ट में असिंक/अवेट की व्याख्या करता है।
YouTube Video
टाइपस्क्रिप्ट में असिंक/अवेट
टाइपस्क्रिप्ट में, async एक कीवर्ड है जो एसिंक्रोनस संचालन को संक्षेप में वर्णित करता है और यह जावास्क्रिप्ट के async/await सिंटैक्स की तरह ही कार्य करता है। Async फ़ंक्शन उन फ़ंक्शंस को संभालने के लिए डिज़ाइन किए गए हैं जो प्रॉमिस लौटाते हैं, उन्हें और अधिक सहज बनाते हैं।
Async फ़ंक्शंस की आधारभूत बातें
Async कीवर्ड से घोषित किए गए फ़ंक्शंस हमेशा एक Promise वापस करते हैं। यहाँ एक बुनियादी उदाहरण दिया गया है:।
1async function fetchData(): Promise<string> {
2 return "Data received";
3}
4
5fetchData().then((data) => console.log(data)); // "Data received"
इस उदाहरण में, क्योंकि async फ़ंक्शन हमेशा एक Promise लौटाता है, इसलिए लौटाई गई मान को स्वचालित रूप से Promise.resolve का उपयोग करके हल किया जाता है। दूसरे शब्दों में, "Data received" एक Promise<string> बन जाता है और इसे एक एसिंक्रोनस संचालन के रूप में माना जाता है।
Await कीवर्ड
Await कीवर्ड केवल एक async फ़ंक्शन के भीतर ही उपयोग किया जा सकता है। यह फ़ंक्शन निष्पादन के साथ जारी रखने से पहले एक Promise के परिणाम के लिए रुकने और प्रतीक्षा करने की क्षमता प्रदान करता है।
निम्नलिखित उदाहरण में, fetch का उपयोग करके एसिंक्रोनस प्रोसेसिंग को async/await के साथ लिखा गया है।
1async function getUserData() {
2 try {
3 const response = await fetch("https://codesparklab.com/json/example.json");
4 const data = await response.json();
5 console.log(data);
6 } catch (error) {
7 console.error("Error fetching user data:", error);
8 }
9}
10
11getUserData();इस उदाहरण में, fetch फ़ंक्शन द्वारा लौटाए गए Promise के पूर्ण होने की प्रतीक्षा करने के लिए await का उपयोग किया गया है, और इसका परिणाम वेरिएबल response में सौंपा गया है। आगे, response.json() के परिणाम का भी इंतजार किया जाता है।
Async/await के साथ त्रुटि प्रबंधन
एसिंक्रोनस प्रोसेसिंग के दौरान आने वाली त्रुटियों को मानक try...catch सिंटैक्स का उपयोग करके पकड़ा जा सकता है। यदि await भाग में कोई त्रुटि होती है, तो उस त्रुटि को catch ब्लॉक में प्रबंधित किया जाता है।
1async function fetchDataWithErrorHandling() {
2 try {
3 const response = await fetch('https://invalid.codesparklab.com/');
4 if (!response.ok) {
5 throw new Error(`HTTP error! status: ${response.status}`);
6 }
7 const data = await response.json();
8 console.log(data);
9 } catch (error) {
10 console.error("Fetch error:", error);
11 }
12}
13
14fetchDataWithErrorHandling();ऊपर दिए गए उदाहरण में, fetch फ़ंक्शन के परिणाम का await के साथ इंतजार किया गया है, और यदि कोई त्रुटि होती है, तो इसे try...catch के माध्यम से प्रबंधित किया जाता है।
Async/await के लाभ
-
सहज एसिंक्रोनस प्रोसेसिंग:
Async/awaitका उपयोग करके, कोड प्रवाहPromiseचेन (thenयाcatch) का उपयोग करने की तुलना में अधिक सहज हो जाता है, जिससे इसे सिंक्रोनस प्रोसेसिंग की तरह लिखा जा सकता है। -
आसान त्रुटि प्रबंधन:
Try...catchका उपयोग करने से एसिंक्रोनस संचालन में त्रुटि प्रबंधन सरल हो जाता है। आपPromiseचेन का उपयोग करने की तुलना में अधिक पठनीय कोड लिख सकते हैं।
Async फ़ंक्शंस के रिटर्न मान
async फ़ंक्शन हमेशा एक Promise लौटाता है। इसलिए, बिना स्पष्ट रूप से Promise लौटाए भी, async कुंजीशब्द का उपयोग करके असिंक्रोनस प्रोसेसिंग संभव है।
1async function example() {
2 return 42;
3}
4
5example().then((result) => console.log(result)); // 42
उपरोक्त कोड में, एक सिंक्रोनस मान 42 लौटाया जाता है, लेकिन क्योंकि यह एक async फ़ंक्शन के अंदर है, इसे स्वतः Promise.resolve(42) में परिवर्तित कर दिया जाता है।
असिंक्रोनस फ़ंक्शनों का क्रमिक निष्पादन।
जब लगातार कई असिंक्रोनस फ़ंक्शन निष्पादित किए जाते हैं, तो उनके क्रम को नियंत्रित करने के लिए आप await का उपयोग कर सकते हैं।
1async function fetchData(url: string): Promise<any> {
2 try {
3 const response = await fetch(url);
4 return await response.json();
5 } catch (error) {
6 console.error("Error fetching user data:", error);
7 }
8}
9
10async function fetchData1(): Promise<any> {
11 return await fetchData("https://codesparklab.com/json/example.json");
12}
13
14async function fetchData2(): Promise<any> {
15 return await fetchData("https://codesparklab.com/json/example2.json");
16}
17
18async function processData() {
19 const data1 = await fetchData1();
20 console.log(data1);
21
22 const data2 = await fetchData2();
23 console.log(data2);
24}
25
26processData();इस उदाहरण में, fetchData1 के समाप्त होने की प्रतीक्षा के बाद fetchData2 निष्पादित किया जाता है। यह Promise चेन उपयोग करने की तुलना में अधिक पढ़ने योग्य है।
समानांतर निष्पादन।
यदि आप असिंक्रोनस संचालन को समानांतर में निष्पादित करना चाहते हैं, तो आप Promise.all का उपयोग करके कई Promises को एक साथ प्रबंधित कर सकते हैं।
1async function fetchData(url: string): Promise<any> {
2 try {
3 const response = await fetch(url);
4 return await response.json();
5 } catch (error) {
6 console.error("Error fetching user data:", error);
7 }
8}
9
10async function fetchData1(): Promise<any> {
11 return await fetchData("https://codesparklab.com/json/example.json");
12}
13
14async function fetchData2(): Promise<any> {
15 return await fetchData("https://codesparklab.com/json/example2.json");
16}
17
18async function fetchMultipleData() {
19 const [data1, data2] = await Promise.all([fetchData1(), fetchData2()]);
20 console.log(data1);
21 console.log(data2);
22}
23
24fetchMultipleData();इस मामले में, fetchData1 और fetchData2 एक ही समय पर निष्पादित होते हैं, और दोनों के हल होने के बाद प्रक्रिया आगे बढ़ती है। यह कई असिंक्रोनस संचालन को कुशलतापूर्वक संभालने की अनुमति देता है।
सारांश
asyncफ़ंक्शन एकPromiseलौटाता है, औरawaitकुंजीशब्द का उपयोग करके आप एक असिंक्रोनस संचालन के परिणाम की प्रतीक्षा कर सकते हैं।try...catchका उपयोग करके, असिंक्रोनस संचालन में त्रुटि प्रबंधन सरल हो जाता है।Promise.allका उपयोग करके, कई असिंक्रोनस संचालन को समानांतर में निष्पादित करना संभव है।
async/await का TypeScript और JavaScript में व्यापक रूप से उपयोग किया जाता है क्योंकि यह असिंक्रोनस संचालन का सरल वर्णन प्रदान करता है।
आप हमारे YouTube चैनल पर Visual Studio Code का उपयोग करके ऊपर दिए गए लेख के साथ आगे बढ़ सकते हैं। कृपया YouTube चैनल को भी देखें।