JavaScript Promises आणि Async/Await चे स्पष्टीकरण

कल्पना करा की तुम्ही ऑनलाइन पिझ्झा ऑर्डर केला आहे.

तो येईपर्यंत तुम्ही दरवाजापाशी काहीही न करता उभे राहत नाही. तुम्ही व्हिडिओ पाहता, काम करता किंवा मित्रांशी गप्पा मारता. जेव्हा पिझ्झा येतो, तेव्हा तुम्ही तो खाता.

JavaScript देखील याच पद्धतीने काम करते.

API requests किंवा database calls सारख्या कामांना वेळ लागतो. जर JavaScript प्रत्येक कामासाठी थांबले, तर तुमचे app फ्रीझ होईल. त्याऐवजी, ते थांबलेले असताना इतर कोड चालवणे सुरू ठेवते.

Promise हे भविष्यात मिळणाऱ्या मूल्याचे (value) प्रतिनिधित्व करते.

Promise च्या तीन अवस्था (states) असतात:

नवीन Promise तयार करण्यासाठी वापरला जाणारा कोड तुम्हाला क्वचितच पाहायला मिळेल. याचे कारण असे की fetch() सारखी आधुनिक साधने तुमच्यासाठी आधीच Promise रिटर्न करतात.

.then() काय करते?

अनेक लोकांना वाटते की .then() डेटा मिळवते (retrieves). पण तसे नाही.

.then() एक callback function रजिस्टर करते. तुम्ही JavaScript ला सांगता: "जेव्हा हे Promise पूर्ण होईल, तेव्हा हे function चालवा."

हे एखाद्या डिलिव्हरी ॲपसारखे आहे. तुम्ही जेवण ऑर्डर करता आणि ॲप म्हणते: "जेवण आल्यावर मला कॉल करा." ते function निकालाची (result) वाट पाहते.

Async/Await का वापरावे?

तुम्ही युजरचा डेटा, त्यानंतर पोस्ट्स आणि त्यानंतर कमेंट्स मिळवण्यासाठी .then() कॉल्सची साखळी (chain) तयार करू शकता. हे काम करते, पण लांब साखळ्या वाचायला कठीण असतात.

Async/await मुळे कोड सामान्य, टप्प्याटप्प्याने चालणाऱ्या कोडसारखा दिसतो. तो अधिक स्वच्छ (cleaner) आणि समजायला सोपा असतो.

await JavaScript ला ब्लॉक करते का?

हा एक सामान्य मुलाखतीचा (interview) प्रश्न आहे. याचे उत्तर 'नाही' असे आहे.

जेव्हा JavaScript await कीवर्डवर पोहोचते, तेव्हा ते फक्त त्या विशिष्ट async function ला थांबवते. तुमच्या ॲप्लिकेशनचा उर्वरित भाग चालू राहतो.

उदाहरण प्रवाह (Example flow):

  1. async function मधील कोड चालवा.
  2. await वर पोहोचा आणि ते function थांबवा.
  3. ॲप्लिकेशनचा उर्वरित भाग चालवा.
  4. जेव्हा काम पूर्ण होईल, तेव्हा async function पुन्हा सुरू करा.

Async/await ही केवळ Promises लिहिण्याची एक अधिक स्वच्छ पद्धत आहे. याला 'syntactic sugar' म्हणतात.

महत्त्वाचे मुद्दे (Key takeaways):

स्रोत: https://dev.to/aarthirs/javascript-promises-asyncawait-explained-with-a-real-life-example-43bm