JavaScript Promises और Async/Await की व्याख्या
कल्पना कीजिए कि आपने ऑनलाइन पिज्जा ऑर्डर किया है।
आप उसके आने तक दरवाजे पर खाली खड़े नहीं रहते। आप वीडियो देखते हैं, काम करते हैं, या दोस्तों से बात करते हैं। जब पिज्जा आता है, तब आप उसे खाते हैं।
JavaScript भी इसी तरह काम करता है।
API requests या database calls जैसे कार्यों में समय लगता है। यदि JavaScript प्रत्येक कार्य के पूरा होने का इंतज़ार करता, तो आपका ऐप फ्रीज़ (freeze) हो जाता। इसके बजाय, इंतज़ार करते समय यह अन्य कोड को चलाना जारी रखता है।
एक Promise उस वैल्यू (value) को दर्शाता है जो भविष्य में प्राप्त होगी।
एक Promise की तीन अवस्थाएँ (states) होती हैं:
- Pending
- Fulfilled (सफलता)
- Rejected (विफलता)
आप नया Promise बनाने के लिए उपयोग किए जाने वाले कोड को शायद ही कभी देखते होंगे। ऐसा इसलिए है क्योंकि fetch() जैसे आधुनिक टूल्स पहले से ही आपके लिए एक Promise रिटर्न करते हैं।
.then() क्या करता है?
कई लोग सोचते हैं कि .then() डेटा प्राप्त (retrieve) करता है। ऐसा नहीं है।
.then() एक callback function को रजिस्टर करता है। आप JavaScript को बताते हैं: "जब यह Promise पूरा हो जाए, तो इस function को चलाएं।"
यह एक डिलीवरी ऐप की तरह है। आप खाना ऑर्डर करते हैं, और ऐप कहता है: "जब खाना आ जाए तो मुझे कॉल करना।" function परिणाम का इंतज़ार करता है।
Async/Await का उपयोग क्यों करें?
आप यूजर डेटा, फिर पोस्ट, और फिर कमेंट्स प्राप्त करने के लिए .then() कॉल्स को चेन (chain) कर सकते हैं। यह काम तो करता है, लेकिन लंबी चेन को पढ़ना मुश्किल होता है।
Async/await कोड को सामान्य, स्टेप-बाय-स्टेप कोड जैसा बना देता है। यह अधिक साफ-सुथरा और समझने में आसान है।
क्या await JavaScript को ब्लॉक करता है?
यह एक सामान्य इंटरव्यू प्रश्न है। इसका उत्तर है—नहीं।
जब JavaScript await कीवर्ड पर पहुँचता है, तो यह केवल उस विशिष्ट async function को रोकता (pause) है। आपका बाकी एप्लिकेशन चलता रहता है।
उदाहरण प्रवाह (flow):
- async function में कोड चलाएं।
awaitपर पहुँचें और उस function को रोक दें।- एप्लिकेशन के बाकी हिस्से को चलाएं।
- जब कार्य पूरा हो जाए, तो async function को फिर से शुरू करें।
Async/await केवल Promises लिखने का एक साफ-सुथरा तरीका है। यह केवल 'syntactic sugar' है।
मुख्य बातें (Key takeaways):
- Promise = एक भविष्य की वैल्यू (future value)।
- fetch() = एक Promise रिटर्न करता है।
- .then() = तैयार होने पर इसे चलाएं।
- await = इस function को रोकें, पूरे प्रोग्राम को नहीं।
- async/await = Promises का साफ-सुथरा सिंटैक्स (syntax)।
स्रोत: https://dev.to/aarthirs/javascript-promises-asyncawait-explained-with-a-real-life-example-43bm