JS एसिंक/अवेट
किसी recipe को step by step follow करने के बारे में सोचें, पानी के उबलने का इंतज़ार करें, फिर pasta डालें, फिर उसे छानने से पहले फिर इंतज़ार करें, हर step क्रम में स्वाभाविक रूप से पढ़ा जाता है, भले ही कुछ steps में सच में समय लगता हो।
async और await asynchronous JavaScript code को उसी स्वाभाविक, ऊपर-से-नीचे तरीके से पढ़ने देते हैं, .then() calls को chain करने के बजाय, आप किसी promise से पहले await लिखते हैं और code वहीं रुक जाता है जब तक वह तैयार नहीं होता, बिना बाकी page को freeze किए।
यह asynchronous logic को, जैसे cookiescursor.com पर किसी tutorial का data fetch करना, पढ़ने और समझने में कहीं ज़्यादा आसान बनाता है।
In this page:
Syntax
async function functionName() {
try {
const result = await promise;
} catch (error) {
// handle error
}
}async Keyword
किसी function declaration से पहले async रखना उसे asynchronous बना देता है, जो उसके अंदर await इस्तेमाल करने देता है, और function को खुद अपने आप एक promise return करा देता है, भले ही ऐसा लगे कि वह एक साधारण value return कर रहा है।
Note:
किसी भी function को, जिसे अपने अंदर कहीं भी await इस्तेमाल करना हो, खुद async keyword से declare करना ज़रूरी है।
Warning:
एक async function हमेशा एक promise return करता है, इसके अंदर एक साधारण return text; भी असल में एक ऐसा promise return करता है जो उस text में resolve होता है।
उदाहरण: The async Keyword
async function getValue() {
return 42;
}
getValue().then(v => console.log(v)); // async function returns a promiseawait Keyword
await किसी async function की execution को ठीक उसी line पर तब तक रोक देता है जब तक जिस promise का वह इंतज़ार कर रहा है वह settle न हो जाए, फिर resolved value के साथ आगे बढ़ता है, जिससे asynchronous code एक स्वाभाविक, क्रमवार तरीके से पढ़ा जाता है।
Note:
await सिर्फ उस async function को रोकता है जिसके अंदर वह है, बाकी page और कोई भी दूसरा code इस बीच सामान्य रूप से चलता रहता है।
Warning:
किसी ऐसी value पर await इस्तेमाल करना जो promise नहीं है, फिर भी काम करता है, पर वह बस तुरंत resolve हो जाती है, यह कोई error नहीं है, बस उस स्थिति में अनावश्यक है।
उदाहरण: The await Keyword
// Define the asynchronous function `run` with no parameters
// Define the asynchronous function `run` with no parameters
async function run() {
// Declare the constant `value`, set to `await Promise.resolve(10)`
// Declare the constant `value`, set to `await Promise.resolve(10)`
const value = await Promise.resolve(10);
// Print `value` to the console
// Print `value` to the console
console.log(value);
}
// Call `run()`
// Call `run()`
run();try/catch से Error Handling
await statements को किसी try block में लपेटना आपको matching catch block में किसी rejected promise की error catch करने देता है, जो बिना .catch() chain किए asynchronous errors संभालने का एक साफ, जाना-पहचाना तरीका देता है।
Note:
await के आसपास try/catch पढ़ने में regular synchronous code में errors संभालने जैसा ही लगता है, जो async/await के सबसे बड़े readability फायदों में से एक है।
Warning:
किसी try block के अंदर मौजूद await, जिसके बाद असल में कोई matching catch नहीं है, फिर भी सामान्य रूप से throw करता है, async functions में uncaught errors कहीं और चुपचाप fail हो सकते हैं।
उदाहरण: Error Handling With try/catch
// Define the asynchronous function `run` with no parameters
// Define the asynchronous function `run` with no parameters
async function run() {
// Try running this block; jump to `catch` if it throws
// Try running this block; jump to `catch` if it throws
try {
// Wait for `Promise.reject("failed")` to resolve before continuing
// Wait for `Promise.reject("failed")` to resolve before continuing
await Promise.reject("failed");
// Catch any error, bound to `err`
// Catch any error, bound to `err`
} catch (err) {
// Print `"Caught:", err` to the console
// Print `"Caught:", err` to the console
console.log("Caught:", err);
}
}
// Call `run()`
// Call `run()`
run();async/await बनाम Promises
async/await सीधे promises के ऊपर बना है, यह मूल रूप से उसी underlying mechanism के लिए एक ज़्यादा readable syntax है, इसीलिए दोनों approaches को बेझिझक मिलाया जा सकता है, और इसीलिए पहले promises समझना async/await को समझना आसान बना देता है।
Note:
साधारण, single-step asynchronous code के लिए, दोनों styles ठीक काम करती हैं, async/await तब सबसे साफ चमकता है जब आपके पास कई क्रमवार steps हों।
Warning:
चूंकि async/await promises पर बना है, जिस भी function को आप await करें उसे असल में एक promise return करना ही होगा, किसी non-promise function को await करने से वह asynchronous नहीं बन जाता।
उदाहरण: async/await vs Promises
// Same result, two styles:
Promise.resolve(5).then(v => console.log(v));
async function run() {
const v = await Promise.resolve(5);
console.log(v);
}
run();एक Practical Example
async/await को try/catch और कई क्रमवार steps के साथ मिलाना इस pattern की असली ताकत दिखाता है, जटिल asynchronous logic लगभग सीधी, synchronous code जैसी पढ़ने में आती है।
Note:
जब कई async steps सच में एक-दूसरे पर निर्भर नहीं होते, तो उन्हें एक-एक करके अनावश्यक रूप से await करने के बजाय await के साथ Promise.all इस्तेमाल करें।
Warning:
independent operations को एक के बाद एक क्रम में await करना, जबकि वे एक साथ चल सकते थे, आपके code को अनावश्यक रूप से धीमा कर देता है।
उदाहरण: A Practical Example
// Define the asynchronous function `getUser` with no parameters
// Define the asynchronous function `getUser` with no parameters
async function getUser() {
// Try running this block; jump to `catch` if it throws
// Try running this block; jump to `catch` if it throws
try {
// Declare the constant `id`, set to `await Promise.resolve(1)`
// Declare the constant `id`, set to `await Promise.resolve(1)`
const id = await Promise.resolve(1);
// Declare the constant `name`, set to `await Promise.resolve("Sam")`
// Declare the constant `name`, set to `await Promise.resolve("Sam")`
const name = await Promise.resolve("Sam");
// Print `id, name` to the console
// Print `id, name` to the console
console.log(id, name);
// Catch any error, bound to `err`
// Catch any error, bound to `err`
} catch (err) {
// Print `"Error:", err` to the console
// Print `"Error:", err` to the console
console.log("Error:", err);
}
}
// Call `getUser()`
// Call `getUser()`
getUser();Live Example
Related Topics
{# common_mistakes/chapter_summary/browser_support: on Hindi pages the
view already swaps in the hi_ translation fields (or blanks these
out if untranslated), so this renders correctly for both languages
without a lang_code check here. #}
आम गलतियां
- async marked किसी function के बाहर await इस्तेमाल करना, जो एक syntax error का कारण बनता है, await सिर्फ async functions के अंदर काम करता है।
- किसी await के चारों ओर try/catch भूल जाना, किसी async function के अंदर एक unhandled rejected promise एक error throw करता है जिसे catch करना ज़रूरी है।
- promises को unnecessarily एक के बाद एक await करना जब वे एक-दूसरे पर depend नहीं करते, वह time बर्बाद करते हुए जो Promise.all parallel में चला सकता था।
चैप्टर सारांश
- async keyword किसी function को asynchronous mark करता है, उसे await इस्तेमाल करने देते हुए और automatically उसे एक promise return करवाते हुए।
- await किसी async function के अंदर execution को तब तक रोकता है जब तक कोई promise settle न हो जाए, बिना बाकी page को block किए।
- किसी async function के अंदर awaited promises से errors handle करने का standard तरीका try/catch है।
ब्राउज़र सपोर्ट
async/await को 2017 से सभी major browsers में support मिला है और अब यह modern JavaScript का एक standard, widely used हिस्सा है।
🔒
Chapter Quiz — Complete all 26 topics to unlock
0/26 topics done
Complete these topics first:
- JS Dates
- JS Math
- JS Conditionals
- JS Switch
- JS Loop For
- JS Loop While
- JS Iterables
- JS Sets
- JS Maps
- JS typeof
- JS Type Conversion
- JS Destructuring
- JS Arrow Functions
- JS Classes
- JS Modules
- JS Promises
- JS Async/Await
- JS DOM
- JS DOM Methods
- JS Events Advanced
- JS DOM Navigation
- JS DOM Collections
- JS Async Callbacks
- JS Async Parallel
- JS Date Set
- JS Set Logic