JavaScript में Async/await

इस लेख में, हम JavaScript में async/await को समझाएंगे।

YouTube Video

JavaScript में Async/await

JavaScript में async (और await) ऐसी सुविधाएं हैं जिन्हें असिंक्रोनस ऑपरेशंस को अधिक सहज और पढ़ने योग्य बनाने के लिए डिज़ाइन किया गया है। इसका उपयोग करके, आप पारंपरिक कॉलबैक फ़ंक्शनों और Promise चेनों की जटिलता को कम कर सकते हैं, और असिंक्रोनस कोड को इस तरह लिख सकते हैं कि वह सिंक्रोनस कोड जैसा दिखाई दे।

async फ़ंक्शन

async का उपयोग एक फ़ंक्शन को असिंक्रोनस फ़ंक्शन के रूप में परिभाषित करने के लिए किया जाता है। एक async फ़ंक्शन हमेशा एक Promise लौटाता है। async चिह्नित फ़ंक्शन के अंदर, आप किसी Promise के परिणाम का इंतजार करने के लिए await का उपयोग कर सकते हैं।

async फ़ंक्शन की बुनियादी सिंटैक्स

1async function myAsyncFunction() {
2    // Write asynchronous processing here
3    return 'Result';  // Return a Promise
4}

इस मामले में, myAsyncFunction() को कॉल करने पर स्वचालित रूप से एक Promise ऑब्जेक्ट लौटाया जाता है। जब Promise हल हो जाता है, तो उसका परिणाम return द्वारा लौटाई गई मान बन जाता है।

उदाहरण: बुनियादी async फ़ंक्शन

1async function greet() {
2    return 'Hello, World!';
3}
4
5greet().then((message) => {
6    console.log(message);  // Displays "Hello, World!"
7});

await

await का उपयोग Promise के हल होने का इंतजार करने के लिए किया जाता है। await का उपयोग करके, आप निष्पादन को रोक सकते हैं जब तक कि Promise हल न हो जाए, और Promise का परिणाम प्राप्त कर सकते हैं। await का उपयोग केवल async फ़ंक्शन के अंदर ही किया जा सकता है।

उदाहरण: await का उपयोग कैसे करें

 1async function fetchData() {
 2    // Wait for the result of the Promise
 3    const data = await fetch('https://codesparklab.com/json/example.json');
 4    // Wait for the asynchronous operation to complete
 5    const jsonData = await data.json();
 6    // Retrieve and display the data
 7    console.log(jsonData);
 8}
 9
10fetchData();

उपरोक्त उदाहरण में, यह await का उपयोग करके fetch फ़ंक्शन द्वारा लौटाए गए Promise का इंतजार करता है, और फिर परिणाम का उपयोग करके आगे की असिंक्रोनस ऑपरेशंस करता है।

async/await के साथ त्रुटि संभालना

यदि किसी async फ़ंक्शन के अंदर कोई त्रुटि होती है, तो उस त्रुटि को Promise के reject के रूप में माना जाता है। आप त्रुटियों को संभालने के लिए try...catch कथनों का उपयोग कर सकते हैं।

उदाहरण: त्रुटि संभालना

 1async function fetchData() {
 2    try {
 3        // Invalid URL
 4        const data = await fetch('https://invalid.codesparklab.com/');
 5        const jsonData = await data.json();
 6        console.log(jsonData);
 7    } catch (error) {
 8        // Catch the error
 9        console.error('Failed to fetch data:', error);
10    }
11}
12
13fetchData();

try...catch ब्लॉक का उपयोग करके, आप असिंक्रोनस ऑपरेशंस के दौरान होने वाली त्रुटियों को पकड़ सकते हैं, और इन त्रुटियों के होने पर प्रोग्राम को क्रैश होने से रोक सकते हैं।

async/await के लाभ

पारंपरिक Promise चेनों की तुलना में, async/await निम्नलिखित लाभ प्रदान करता है:।

• बेहतर पठनीयता
  • असिंक्रोनस प्रोसेसिंग को सिंक्रोनस कोड की तरह लिखा जा सकता है, जिससे गहराई से नेस्टेड Promise चेनों और कॉलबैक की जटिलता से बचा जा सकता है।
• आसान डिबगिंग
  • चूंकि यह सिंक्रोनस कोड जैसा लगता है, इसलिए डिबगिंग और त्रुटि हैंडलिंग आसान हो जाती है।
• बेहतर अनुरक्षणीयता
  • असिंक्रोनस प्रक्रियाओं को अधिक सरलता से लिखा जा सकता है, जिससे कोड को बदलना या संशोधित करना आसान हो जाता है और दीर्घकालिक अनुरक्षणीयता में सुधार होता है।

उदाहरण: Promise चेन बनाम async/await

आइए Promise चेन के साथ लिखे गए कोड और async/await के साथ लिखे गए कोड की तुलना करें।

 1// Code using Promise chains
 2function fetchDataPromise() {
 3    fetch('https://codesparklab.com/json/example.json')
 4        .then((response) => response.json())
 5        .then((data) => {
 6            console.log(data);
 7        })
 8    .catch((error) => {
 9        console.error('Failed to fetch data:', error);
10    });
11}
12
13// Code using async/await
14async function fetchDataAsync() {
15    try {
16        const response = await fetch('https://codesparklab.com/json/example.json');
17        const data = await response.json();
18        console.log(data);
19    } catch (error) {
20        console.error('Failed to fetch data:', error);
21    }
22}

जैसा कि आप देख सकते हैं, async/await का उपयोग करके आप असिंक्रोनस प्रक्रियाओं को रैखिक रूप में लिख सकते हैं, जिससे कोड अधिक पठनीय बनता है।

एक साथ कई असिंक्रोनस ऑपरेशन्स निष्पादित करें।

Promise.all() या Promise.race() को await के साथ संयोजित करके, आप एक साथ कई असिंक्रोनस ऑपरेशन्स निष्पादित कर सकते हैं और उनके परिणाम सामूहिक रूप से संभाल सकते हैं।

Promise.all()

 1async function fetchMultipleData() {
 2    try {
 3        const [data1, data2] = await Promise.all([
 4            fetch('https://codesparklab.com/json/example1.json'),
 5            fetch('https://codesparklab.com/json/example2.json')
 6        ]);
 7        const jsonData1 = await data1.json();
 8        const jsonData2 = await data2.json();
 9        console.log(jsonData1);
10        console.log(jsonData2);
11    } catch (error) {
12        console.error('Failed to fetch data:', error);
13    }
14}
15
16fetchMultipleData();

• Promise.all() एक साथ कई प्रॉमिस को हल करता है और उनके परिणामों को एक एरे के रूप में लौटाता है। यह सभी प्रॉमिस के हल होने का इंतजार करता है, और यदि उनमें से कोई भी विफल होता है, तो इसे समग्र रूप से विफलता माना जाता है।

Promise.race()

 1async function fetchFastestData() {
 2    try {
 3        const fastestResponse = await Promise.race([
 4            fetch('https://codesparklab.com/json/example1.json'),
 5            fetch('https://codesparklab.com/json/example2.json')
 6        ]);
 7        const jsonData = await fastestResponse.json();
 8        console.log('Fastest data:', jsonData);
 9    } catch (error) {
10        console.error('Fetch error:', error);
11    }
12}
13
14fetchFastestData();

• Promise.race() पहले पूर्ण या अस्वीकार किए गए प्रॉमिस का परिणाम लौटाता है। यह तब उपयोगी होता है जब आप उस ऐसिंक्रोनस ऑपरेशन को प्राथमिकता देना चाहते हैं जो सबसे पहले पूरा हो जाए। हालाँकि, अगर पहला प्रॉमिस असफल होता है, तो catch द्वारा त्रुटि तुरंत पकड़ ली जाती है।

Promise.allSettled()

 1async function fetchWithAllSettled() {
 2    const results = await Promise.allSettled([
 3        // This URL will success
 4        fetch('https://codesparklab.com/json/example1.json'),
 5        // This URL will fail
 6        fetch('https://invalid.codesparklab.com/')
 7    ]);
 8
 9    results.forEach((result, index) => {
10        if (result.status === 'fulfilled') {
11            const url = result.value.url;
12            console.log(`Request ${index + 1} succeeded:`, url);
13        } else {
14            const reason = result.reason;
15            console.warn(`Request ${index + 1} failed:`, reason);
16        }
17    });
18}
19
20fetchWithAllSettled();

• Promise.allSettled() सफलता या विफलता की परवाह किए बिना सभी परिणामों का इंतजार करता है। हर परिणाम { status, value } या { status, reason } के रूप में लौटाया जाता है, जिससे आप जान सकते हैं कि कौन से प्रॉमिस सफल हुए और कौन से असफल।

Promise.any()

 1async function fetchAnySuccessful() {
 2    try {
 3        const firstSuccessful = await Promise.any([
 4            // This URL will fail
 5            fetch('https://invalid.codesparklab.com/'),
 6            // This URL will success
 7            fetch('https://codesparklab.com/json/example1.json')
 8        ]);
 9        const jsonData = await firstSuccessful.json();
10        console.log('First successful response:', jsonData);
11    } catch (error) {
12        console.error('All fetch requests failed:', error);
13    }
14}
15
16fetchAnySuccessful();

• Promise.any() केवल पहले सफलतापूर्वक पूर्ण हुए प्रॉमिस का परिणाम लौटाता है। केवल तभी अपवाद (exception) फेंका जाता है जब सभी प्रॉमिस असफल हो जाते हैं। इसे ऐसे मामलों में पुनः प्रयास (retry) के रूप में इस्तेमाल किया जा सकता है जहाँ कुछ APIs अस्थिर होती हैं, जब तक कि कोई एक सफल न हो जाए।

सारांश

• async फ़ंक्शन: हमेशा एक प्रॉमिस लौटाता है और इसका उपयोग असिंक्रोनस प्रोसेसिंग लिखने के लिए किया जाता है।
• await: किसी प्रॉमिस के हल होने और उसके परिणाम को प्राप्त करने के लिए उपयोग किया जाता है।
• त्रुटि प्रबंधन: असिंक्रोनस प्रोसेसिंग के दौरान होने वाली त्रुटियों को संभालने के लिए try...catch का उपयोग करें।
• कई ऐसिंक्रोनस ऑपरेशन: Promise.all() जैसे तरीकों का उपयोग करके, आप कई असिंक्रोनस कार्य एक साथ चला सकते हैं।

async/await असिंक्रोनस प्रोसेसिंग को संभालने के लिए शक्तिशाली उपकरण हैं, इसलिए जटिल असिंक्रोनस लॉजिक को सरल बनाने के लिए उनका उपयोग करना सुनिश्चित करें।

आप हमारे YouTube चैनल पर Visual Studio Code का उपयोग करके ऊपर दिए गए लेख के साथ आगे बढ़ सकते हैं। कृपया YouTube चैनल को भी देखें।

YouTube Video