पाठ 28, कुल 30 में

JavaScript Promises और async/await — इंतज़ार का तरीका

5 मिनट पढ़ें · मुफ़्त · बिना लॉगिन

English हिंदी

JavaScript Classes — एक बार लिखिए, बार-बार बनाइए JavaScript और DOM — पेज को पेड़ समझिए

ज़्यादातर JavaScript तुरंत चलता है: दो numbers जोड़िए, message दिखाइए, हो गया। पर कुछ कामों में समय लगता है — server से डेटा माँगना, file लोड होने का इंतज़ार करना, या सिर्फ दो सेकंड रुकना। JavaScript इंतज़ार करते समय पेज को रोकता नहीं है। इसके बजाय वह Promise बनाता है: 'मैं आपको जवाब बाद में दूँगा।' आपका code बाकी कामों के साथ आगे बढ़ सकता है, और जब जवाब आता है, तो JavaScript आपको बता देता है।

Diagram — देखें, यह सब कैसे जुड़ता है

व्यस्त दुकान पर चाय order करने की तरह सोचिए। आप counter पर खड़े होकर बाकी सबको रोकते नहीं हैं — आपको token number मिलता है, आप बैठ जाते हैं, और दुकान तैयार होने पर आपका number बुलाती है। Token ही Promise है। बुलावा ही जवाब है। और async/await मेज़ पर बैठकर अपने number के बुलाए जाने का इंतज़ार करने जैसा है, बीच में कुछ और किए बिना।

Promises — then और catch

let order = new Promise((resolve, reject) => {
  setTimeout(() => resolve("Your chai is ready!"), 2000);
});
order.then(message => console.log(message))
     .catch(error => console.log("Failed: " + error));

Promise की तीन states होती हैं: pending (इंतज़ार), fulfilled (हो गया, value के साथ) और rejected (fail हो गया, वजह के साथ)। आप इसे new Promise से बनाते हैं, और दो functions देते हैं: सफलता के लिए resolve और असफलता के लिए reject। .then() तब चलता है, जब promise सफल होता है और value पाता है। .catch() तब चलता है, जब वह fail होता है और वजह पाता है। आप उन्हें chain कर सकते हैं: हर .then() अपना नतीजा अगले को देता है, जैसे लोगों की लाइन में पार्सल आगे बढ़ता है।

Note: ऐसा promise जो reject हो गया हो और कहीं भी .catch() न हो, 'unhandled rejection' बन जाता है — browser console में शिकायत करता है, और असफलता आसानी से छूट जाती है। Promise chain को हमेशा .catch() से खत्म कीजिए, चाहे वह सिर्फ error log ही क्यों न करता हो।

async/await — सीधे शब्दों में इंतज़ार

async function orderChai() {
  try {
    let message = await order;
    console.log(message);
  } catch (error) {
    console.log("Failed: " + error);
  }
}

async/await वही idea है, जो सीधे शब्दों में लिखा गया है। किसी function को async mark कीजिए, और उसके अंदर आप promise से पहले await लिख सकते हैं — function वहीं रुक जाता है, जब तक promise settle नहीं होता, फिर value के साथ आगे बढ़ता है, जैसे इंतज़ार हुआ ही नहीं। Errors उसी try...catch से पकड़ी जाती हैं जो आप पहले से जानते हैं। यह सामान्य step-by-step code जैसा पढ़ा जाता है, इसीलिए असली projects में यही मानक style है।

दो नियम: await सिर्फ async function के अंदर काम करता है, और async function हमेशा खुद एक promise देता है — चाहे आप सादा value ही क्यों न return करें, वह promise में लिपटकर वापस आता है।

setTimeout — सबसे आसान इंतज़ार

setTimeout(function, milliseconds) एक function को एक बार, देरी के बाद चलाता है। setTimeout(() => console.log("Done"), 2000) दो सेकंड इंतज़ार करता है, फिर छापता है। यह खुद promise नहीं है, पर आप इसे promise में लपेट सकते हैं — जो नीचे वाला उदाहरण बिल्कुल यही करता है। setInterval इसका रिश्तेदार है: यह function को हर उतने milliseconds में दोहराता है, जब तक आप उसे clearInterval से रोक नहीं देते।

Tip: ऐसे याद रखिए: अभी promise कीजिए, जवाब बाद में मिलेगा — then, catch, या await। छोटी chains के लिए .then() इस्तेमाल कीजिए और जब steps ऊपर से नीचे पढ़ने में बेहतर लगें, तो async/await इस्तेमाल कीजिए। किसी भी तरह, असफलता को हमेशा पकड़िए।

आम गलतियाँ

.catch() भूल जाना — बिना handler के reject हुआ promise आपके code में चुपचाप और console में ज़ोर से fail होता है।
async function के बाहर await इस्तेमाल करना — यह syntax error है। Function को async mark करना चाहिए।
यह सोचना कि await पूरा पेज रोक देता है — यह सिर्फ उसी एक function को रोकता है। बाकी पेज काम करता रहता है।
async function से value return करना और उसे सादा value समझना — वह promise है, इसलिए उसे पढ़ने के लिए .then() या दूसरा await चाहिए।

याद रखें

Promise pending होता है, फिर fulfilled या rejected। resolve सफल करता है, reject fail करता है।
.then() सफलता सँभालता है, .catch() असफलता सँभालता है। उन्हें क्रम में chain कीजिए।
async/await step-by-step code जैसा पढ़ा जाता है; await सिर्फ async के अंदर काम करता है।
setTimeout(fn, ms) एक function को देरी के बाद एक बार चलाता है।
अभी promise कीजिए, जवाब बाद में मिलेगा — then, catch, या await।

उदाहरण समझिए

function makeChai() { return new Promise((resolve) => { ... }); } — एक function जो promise देता है। चाय बनने में 2 सेकंड लगते हैं, इसलिए promise बाद में settle होता है।
setTimeout(() => resolve("Your masala chai is ready!"), 2000); — 2000 milliseconds के बाद promise message के साथ fulfilled होता है।
document.getElementById("out").textContent = "Making your chai..."; — status तुरंत बदल जाता है, ताकि user को पता चले कि order मिल गया है।
makeChai().then(message => { ... }); — जब promise settle होता है, तो message पेज पर दिखाया जाता है। इंतज़ार करते समय कुछ भी रुका नहीं होता।
.catch(error => { ... }) — अगर कुछ fail हो गया, तो उसकी जगह error message दिखाया जाता। हमेशा catch कीजिए।

उदाहरण

Example

<!DOCTYPE html>
<html>
<head>
<title>Order Chai — Promises</title>
<style>
body { font-family: Verdana, sans-serif; background-color: #fff8e1; }
h1 { color: #b45309; text-align: center; }
.card { background-color: white; border: 2px solid #f59e0b; padding: 16px; width: 340px; margin: 20px auto; }
button { background-color: #b45309; color: white; border: none; padding: 10px 18px; font-size: 16px; }
#out { font-weight: bold; color: green; }
</style>
</head>
<body>

<h1>Order Chai</h1>
<div class="card">
<p><button onclick="orderChai()">Order masala chai</button></p>
<p id="out">Your chai status will appear here.</p>
<p>Try it: click the button — the status changes at once, and the chai is ready after 2 seconds.</p>
</div>

<script>
function makeChai() {
  return new Promise((resolve) => {
    setTimeout(() => resolve("Your masala chai is ready!"), 2000);
  });
}
function orderChai() {
  document.getElementById("out").textContent = "Making your chai...";
  makeChai()
    .then(message => {
      document.getElementById("out").textContent = message;
    })
    .catch(error => {
      document.getElementById("out").textContent = "Failed: " + error;
    });
}
</script>

</body>
</html>

परिणाम

परिणाम — ब्राउज़र में यह कैसा दिखता है

खुद करके देखें — लाइव एडिटर

नीचे दिया गया कोड बदलें और चलाएँ दबाएँ — परिणाम तुरंत दिखेगा। कोई फाइल सहेजनी नहीं है, कोई लॉगिन नहीं चाहिए।

<!DOCTYPE html>
<html>
<head>
<title>Order Chai — Promises</title>
<style>
body { font-family: Verdana, sans-serif; background-color: #fff8e1; }
h1 { color: #b45309; text-align: center; }
.card { background-color: white; border: 2px solid #f59e0b; padding: 16px; width: 340px; margin: 20px auto; }
button { background-color: #b45309; color: white; border: none; padding: 10px 18px; font-size: 16px; }
#out { font-weight: bold; color: green; }
</style>
</head>
<body>

<h1>Order Chai</h1>
<div class="card">
<p><button onclick="orderChai()">Order masala chai</button></p>
<p id="out">Your chai status will appear here.</p>
<p>Try it: click the button — the status changes at once, and the chai is ready after 2 seconds.</p>
</div>

</body>
</html>

पूरे एडिटर में खोलें

परिणाम

खुद क्यों सीखें — AI से पूछने के बजाय?

AI आपके लिए कोड लिख सकता है, लेकिन वह आपके लिए सोच नहीं सकता। जब आप HTML खुद सीखते हैं, तो आपका दिमाग असली कौशल बनाता है: आप समझते हैं कि पेज ऐसा क्यों दिखता है, टूटने पर उसे ठीक कर सकते हैं, और परीक्षा या इंटरव्यू में बिना मदद के जवाब दे सकते हैं। यही कौशल नौकरी दिलाता है — कॉपी किया हुआ जवाब नहीं।