𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗣𝗿𝗼𝗺𝗶𝘀𝗲𝘀 𝗔𝗻𝗱 𝗔𝘀𝘆𝗻𝗰/𝗔𝘄𝗮𝗶𝘁 𝗘𝘅𝗽𝗹𝗮𝗶𝗻𝗲𝗱
ऑनलाइन पिज्जा ऑर्डर करने के बारे में सोचें।
आप अपना ऑर्डर देते हैं। आप तब तक अपने दरवाजे पर खाली खड़े नहीं रहते जब तक कि वह आ न जाए। आप वीडियो देखते हैं, काम करते हैं, या दोस्तों से बात करते हैं। जब पिज्जा आ जाता है, तो आप उसे खाते हैं।
JavaScript भी इसी तरह काम करता है।
API requests, database calls और timers जैसे ऑपरेशन्स में समय लगता है। यदि JavaScript प्रत्येक कार्य के पूरा होने का इंतज़ार करता, तो आपका ऐप फ्रीज़ (freeze) हो जाता। इसके बजाय, परिणाम का इंतज़ार करते समय JavaScript अन्य कोड चलाता रहता है।
Promise क्या है?
Promise उस वैल्यू (value) के लिए एक प्लेसहोल्डर (placeholder) है जो आपको भविष्य में मिलेगी।
जब आप चलाते हैं:
const promise = fetch("/users");
डेटा अभी वहां नहीं है। Promise कहता है: "मेरे पास अभी परिणाम नहीं है, लेकिन जब यह तैयार हो जाएगा, तो मैं आपको बता दूंगा।"
एक Promise की तीन अवस्थाएं (states) होती हैं:
- Pending
- Fulfilled (सफलता)
- Rejected (विफलता)
fetch() जैसे अधिकांश आधुनिक APIs स्वचालित रूप से एक Promise लौटाते हैं। आपको हर बार उन्हें मैन्युअल रूप से बनाने की आवश्यकता नहीं है। आप बस उनका उपयोग करते हैं।
.then() क्या करता है?
कई लोग सोचते हैं कि .then() डेटा प्राप्त (retrieve) करता है। ऐसा नहीं है।
.then() एक callback function को रजिस्टर करता है। आप JavaScript को बता रहे हैं: "जब यह Promise पूरा हो जाए, तो इस विशिष्ट function को चलाएं।"
यह एक फूड डिलीवरी ऐप की तरह है। आप खाना ऑर्डर करते हैं, और ऐप आपको बताता है: "जब खाना आ जाए तो मुझे कॉल करना।" Function सिग्नल का इंतज़ार करता है।
Async/Await का उपयोग क्यों करें?
आप डेटा को स्टेप-बाय-स्टेप प्राप्त करने के लिए .then() कॉल्स को चेन (chain) कर सकते हैं। यह काम करता है, लेकिन लंबी चेन को पढ़ना कठिन होता है।
Async/await आपके कोड को सामान्य, स्टेप-बाय-स्टेप कोड जैसा बना देता है। यह अधिक साफ (cleaner) और समझने में आसान है।
क्या await JavaScript को ब्लॉक करता है?
यह एक सामान्य इंटरव्यू प्रश्न है। इसका उत्तर है—नहीं।
जब JavaScript await कीवर्ड पर पहुँचता है, तो यह केवल उस विशिष्ट async function को रोकता (pause) है। आपका बाकी एप्लिकेशन चलता रहता है।
उदाहरण प्रवाह (Example flow):
- Function में कोड चलाएं।
- await पर पहुँचें और उस function को रोक दें।
- बाकी स्क्रिप्ट चलाएं।
- एक बार कार्य पूरा हो जाने पर, function को फिर से शुरू करें।
सारांश:
- Promise = एक भविष्य की वैल्यू।
- fetch() = एक Promise लौटाता है।
- .then() = तैयार होने पर इस function को चलाएं।
- await = इस function को रोकें, पूरे प्रोग्राम को नहीं।
- async/await = Promises लिखने का एक बेहतर तरीका।
Source: https://dev.to/aarthirs/javascript-promises-asyncawait-explained-with-a-real-life-example-43bm