async और await
async फ़ंक्शन में asynchronous चरण ऊपर से नीचे आसानी से पढ़े जाते हैं। await उसी फ़ंक्शन के भीतर Promise की प्रतीक्षा करता है; पूरी page या बाकी JavaScript नहीं रुकती।
await किसे रोकता है
await पर फ़ंक्शन अस्थायी रूप से browser को control लौटा देता है। दूसरे events चलते रह सकते हैं। Promise पूरा होने पर फ़ंक्शन उसी जगह से आगे बढ़ता है।
async हमेशा Promise लौटाता है
फ़ंक्शन string लौटाए तब भी उसकी call उस string से fulfilled Promise देती है। error throw होने पर Promise reject होता है।
await के बाद परिणाम पढ़ें
pour Promise लौटाता है। serve पहले waiting लिखता है, प्रतीक्षा करता है और फिर lida tea पाता है।
function pour(order) {
return new Promise(function (resolve, reject) {
setTimeout(function () {
if (order === "") reject("no leaves");
else resolve(order + " tea");
}, 100);
});
}
async function serve() {
console.log("waiting");
let drink = await pour("lida");
console.log(drink);
}
serve();
आउटपुट पहले waiting, फिर lida tea है। दोनों serve में हैं, लेकिन दूसरी पंक्ति Promise पूरा होने के बाद चलती है।
caller को Promise मिलता है
बिना await के serve() सीधे drink नहीं देता।
async function serve() {
return "lida tea";
}
let ticket = serve();
console.log(ticket instanceof Promise);
आउटपुट true है: ticket Promise है। उसका मान दूसरे async फ़ंक्शन में await या then से पढ़ें।
try और catch से rejection संभालें
await किया गया rejected Promise, await वाली जगह पर thrown error जैसा व्यवहार करता है। operation को try में रखें।
function pour(order) {
return order === ""
? Promise.reject("no leaves")
: Promise.resolve(order + " tea");
}
async function serveEmpty() {
try {
await pour("");
} catch (reason) {
console.log(reason);
}
}
serveEmpty();
आउटपुट no leaves है। उसी try block में बाद में आने वाली errors भी इस catch तक पहुँचेंगी।
बाकी page चलती रहती है
सिर्फ मौजूदा async फ़ंक्शन रुकता है। call तुरंत Promise लौटाती है, इसलिए उसके बाद का synchronous code चल सकता है।
पूरा browser demo
उदाहरण एक async फ़ंक्शन में सभी चरण लिखता है। छोटा timer Promise पूरा करता है, इसलिए server की जरूरत नहीं है।
<!DOCTYPE html>
<html>
<body>
<p id="cup">blank</p>
<p id="line">…</p>
<script>
function pour(order) {
return new Promise(resolve => setTimeout(() => resolve(order + " tea"), 100));
}
async function serve() {
const cup = document.getElementById("cup");
const seen = ["waiting"];
cup.textContent = "waiting";
const drink = await pour("lida");
cup.textContent = drink;
seen.push(drink, "done");
document.getElementById("line").textContent = seen.join(" / ");
}
serve();
</script>
</body>
</html>
अंतिम पंक्ति waiting / lida tea / done है। awaited value लिखने के बाद ही done जोड़ा जाता है।
अभ्यास
lida बदलकर परिणाम await करें। फिर खाली string दें और देखें कि catch को no leaves मिलता है।
आम गलतियाँ
async call से तैयार string की उम्मीद न करें। सामान्य फ़ंक्शन में await न लिखें और इसे पूरी page रोकने वाला न समझें।
याद रखें
async हमेशा Promise लौटाता है। await Promise settle होने तक केवल उसी फ़ंक्शन को रोकता है। rejection के लिए try/catch रखें।
🧠 अपने ज्ञान की परीक्षा करें
अपने ज्ञान की परीक्षा करें
इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं
📝 निर्देश
- हर प्रश्न को ध्यान से पढ़ें
- हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
- आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
- आपकी प्रगति शीर्ष पर दिखाई जाएगी