async/await और Error Handling
await keyword के साथ async functions लिखें, awaited calls को try/catch blocks में रखें और समझें कि async/await, Promises पर आधारित syntactic sugar है।
async/await और Error Handling, CoddyKit पर Frontend Academy का एक निःशुल्क पाठ है। यह 4 में से 4वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह Frontend Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Frontend Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
असिंक्रोनस/प्रतीक्षा क्या है
async/await Promise के ऊपर वाक्य-विन्यास की सुविधा है। कोई async फ़ंक्शन हमेशा Promise लौटाता है। await कीवर्ड तब तक फ़ंक्शन को रोकता है, जब तक प्रतीक्षित Promise तय नहीं हो जाता। कोड समकालिक दिखाई देता है, लेकिन असिंक्रोनस रूप से चलता है।
असिंक्रोनस फ़ंक्शन
फ़ंक्शन घोषणा या व्यंजक के पहले async कीवर्ड जोड़ें। अब फ़ंक्शन अपने लौटाए गए मान को अपने-आप Promise में लपेट देता है।
async function fetchUser(id) {
// implicitly returns a Promise
return { id, name: 'Alice' };
}
// Equivalent to:
function fetchUser(id) {
return Promise.resolve({ id, name: 'Alice' });
}प्रतीक्षा — Promise के लिए रुकना
await का उपयोग केवल किसी async फ़ंक्शन के भीतर किया जा सकता है। यह तब तक निष्पादन रोकता है, जब तक Promise resolve न हो जाए, और resolve किया गया मान लौटाता है। इवेंट लूप में अन्य कोड चलता रहता है।
async function loadProfile(id) {
const user = await fetchUser(id); // waits for Promise
const posts = await fetchPosts(user.id); // waits again
return { user, posts };
}क्रमिक बनाम समानांतर प्रतीक्षा
क्रमिक रूप से प्रतीक्षा करना पढ़ने में आसान है, लेकिन यदि टास्क एक-दूसरे पर निर्भर न हों, तो यह धीमा होता है। कई स्वतंत्र टास्क पर समानांतर रूप से प्रतीक्षा करने के लिए Promise.all() का उपयोग करें।
// Sequential (slow if tasks are independent):
const user = await fetchUser(id);
const settings = await fetchSettings(id); // waits for user unnecessarily
// Parallel (fast):
const [user, settings] = await Promise.all([
fetchUser(id),
fetchSettings(id),
]);त्रुटि-प्रबंधन के लिए try/catch
अस्वीकृतियों को सँभालने के लिए प्रतीक्षित कॉल को try/catch में रखें। catch ब्लॉक को अस्वीकृति का कारण त्रुटि-वस्तु के रूप में मिलता है।
async function saveUser(data) {
try {
const response = await fetch('/api/users', {
method: 'POST',
body: JSON.stringify(data),
headers: { 'Content-Type': 'application/json' }
});
if (!response.ok) throw new Error(`Server error ${response.status}`);
return await response.json();
} catch (err) {
console.error('Save failed:', err.message);
throw err; // re-throw so caller can handle
}
}शीर्ष-स्तरीय प्रतीक्षा
ES मॉड्यूल में (CommonJS में नहीं), आप किसी async फ़ंक्शन में लपेटे बिना शीर्ष स्तर पर await का उपयोग कर सकते हैं। यह मॉड्यूल के आरंभीकरण के लिए उपयोगी है।
// module.js (ES module)
const config = await fetch('/config.json').then(r => r.json());
export const API_URL = config.apiUrl;forEach के साथ असिंक्रोनस/प्रतीक्षा — सावधानी
Array.forEach() असिंक्रोनस कॉलबैक के लिए प्रतीक्षा नहीं करता। क्रमिक असिंक्रोनस पुनरावृत्ति के लिए for...of या समानांतर प्रक्रिया के लिए Promise.all(arr.map(...)) का उपयोग करें।
// WRONG — forEach doesn't await:
items.forEach(async (item) => {
await processItem(item); // runs but forEach doesn't wait
});
// CORRECT — sequential:
for (const item of items) {
await processItem(item);
}
// CORRECT — parallel:
await Promise.all(items.map(item => processItem(item)));त्रुटि-वस्तुएँ और कस्टम त्रुटियाँ
हमेशा त्रुटि-वस्तुएँ throw करें (स्ट्रिंग नहीं), ताकि स्टैक ट्रेस सुरक्षित रहें। विशिष्ट क्षेत्र की त्रुटियों के लिए कस्टम त्रुटि क्लास बनाएँ, जिन्हें कॉल करने वाला प्रकार के आधार पर पकड़ सके।
class NetworkError extends Error {
constructor(message, status) {
super(message);
this.name = 'NetworkError';
this.status = status;
}
}
try {
const res = await fetch(url);
if (!res.ok) throw new NetworkError(`Failed`, res.status);
} catch (err) {
if (err instanceof NetworkError && err.status === 401) {
redirectToLogin();
} else {
throw err;
}
}असिंक्रोनस/प्रतीक्षा में finally
finally ब्लॉक तब चलता है, जब try सफल हो या विफल—ठीक वैसे ही जैसे Promise पर .finally() चलता है। संसाधन छोड़ने या लोडिंग स्थिति छिपाने के लिए इसका उपयोग करें।
async function loadData() {
setLoading(true);
try {
const data = await fetch('/api/data').then(r => r.json());
setData(data);
} catch (err) {
setError(err.message);
} finally {
setLoading(false); // always runs
}
}मॉड्यूल प्रवेश-बिंदुओं के लिए असिंक्रोनस IIFE
जब आप शीर्ष-स्तरीय प्रतीक्षा का उपयोग नहीं कर सकते, तब किसी स्क्रिप्ट के प्रवेश-बिंदु को असिंक्रोनस IIFE में लपेटें।
(async () => {
const data = await fetchInitialData();
renderApp(data);
})();रद्दीकरण के लिए AbortController
चल रहे अनुरोध को रद्द करने के लिए AbortController सिग्नल को डेटा-प्राप्ति प्रक्रिया में दें। AbortError को अलग से पकड़ने पर उपयोगकर्ता को त्रुटि दिखाने से बचा जा सकता है।
const controller = new AbortController();
try {
const data = await fetch(url, { signal: controller.signal }).then(r => r.json());
setData(data);
} catch (err) {
if (err.name !== 'AbortError') setError(err.message);
}
// Cancel:
controller.abort();त्वरित जाँच
प्रतीक्षित Promise से आने वाली त्रुटियों को कौन-सा निर्माण सही ढंग से सँभालता है?
पुनरावलोकन: असिंक्रोनस/प्रतीक्षा
असिंक्रोनस फ़ंक्शन हमेशा Promise लौटाते हैं। प्रतीक्षा तब तक रुकती है, जब तक Promise तय न हो जाए। त्रुटि-प्रबंधन के लिए try/catch का उपयोग करें। समानांतर प्रक्रियाओं के लिए Promise.all() का उपयोग करें। forEach के भीतर await से बचें—for...of या Promise.all का उपयोग करें। AbortController चल रहे अनुरोधों को रद्द करता है। शीर्ष-स्तरीय प्रतीक्षा ES मॉड्यूल में काम करती है।
एआई शिक्षक के साथ HTML सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 41
- पाठ
- 163
अक्सर पूछे जाने वाले प्रश्न
क्या “async/await और Error Handling” पाठ निःशुल्क है?
हाँ—“async/await और Error Handling” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और Frontend Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। Frontend Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
“async/await और Error Handling” में मैं क्या सीखूँगा?
await keyword के साथ async functions लिखें, awaited calls को try/catch blocks में रखें और समझें कि async/await, Promises पर आधारित syntactic sugar है। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Frontend Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या Frontend Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Frontend Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 4वाँ पाठ है।
“async/await और Error Handling” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस Frontend Academy पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर Frontend Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।
इस पाठ्यक्रम के सभी पाठ
- Event Loop: Call Stack, Queue, Microtasks
- Callbacks और Callback Hell
- Promises: then, catch, finally, Promise.all
- async/await और Error Handling