𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗣𝗿𝗼𝗺𝗶𝘀𝗲𝘀 𝗮𝗻𝗱 𝗔𝘀𝘆𝗻𝗰/𝗔𝘄𝗮𝗶𝘁 𝗘𝘅𝗽𝗹𝗮𝗶𝗻𝗲𝗱
ನೀವು ಆನ್ಲೈನ್ನಲ್ಲಿ ಪಿಜ್ಜಾ ಆರ್ಡರ್ ಮಾಡಿದ್ದೀರಿ ಎಂದು ಕಲ್ಪಿಸಿಕೊಳ್ಳಿ.
ಅದು ಬರುವವರೆಗೆ ನೀವು ಬಾಗಿಲ ಬಳಿ ಏನೂ ಮಾಡದೆ ನಿಂತಿರುವುದಿಲ್ಲ. ನೀವು ವಿಡಿಯೋಗಳನ್ನು ನೋಡುತ್ತೀರಿ, ಕೆಲಸ ಮಾಡುತ್ತೀರಿ ಅಥವಾ ಸ್ನೇಹಿತರೊಂದಿಗೆ ಮಾತನಾಡುತ್ತೀರಿ. ಪಿಜ್ಜಾ ಬಂದಾಗ, ನೀವು ಅದನ್ನು ತಿನ್ನುತ್ತೀರಿ.
JavaScript ಕೂಡ ಇದೇ ರೀತಿ ಕೆಲಸ ಮಾಡುತ್ತದೆ.
API requests ಅಥವಾ database calls ನಂತಹ ಕಾರ್ಯಗಳಿಗೆ ಸಮಯ ಬೇಕಾಗುತ್ತದೆ. ಒಂದು ವೇಳೆ JavaScript ಪ್ರತಿ ಕಾರ್ಯಕ್ಕಾಗಿ ಕಾಯುತ್ತಿದ್ದರೆ, ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ (app) ಸ್ಥಗಿತಗೊಳ್ಳುತ್ತಿತ್ತು (freeze). ಬದಲಾಗಿ, ಕಾಯುವ ಸಮಯದಲ್ಲಿ ಅದು ಇತರ ಕೋಡ್ಗಳನ್ನು ಚಲಾಯಿಸುವುದನ್ನು ಮುಂದುವರಿಸುತ್ತದೆ.
Promise ಎಂಬುದು ಭವಿಷ್ಯದಲ್ಲಿ ಬರುವ ಒಂದು ಮೌಲ್ಯವನ್ನು (value) ಪ್ರತಿನಿಧಿಸುತ್ತದೆ.
Promise ಎಂಬುದು ಮೂರು ಸ್ಥಿತಿಗಳನ್ನು (states) ಹೊಂದಿದೆ:
- Pending
- Fulfilled (ಯಶಸ್ಸು)
- Rejected (ಅಪಯಶಸ್ಸು)
ಹೊಸ Promise ಅನ್ನು ರಚಿಸಲು ಬಳಸುವ ಕೋಡ್ ಅನ್ನು ನೀವು ಅಪರೂಪವಾಗಿ ನೋಡುತ್ತೀರಿ. ಏಕೆಂದರೆ fetch() ನಂತಹ ಆಧುನಿಕ ಪರಿಕರಗಳು (tools) ಈಗಾಗಲೇ ನಿಮಗಾಗಿ ಒಂದು Promise ಅನ್ನು ಹಿಂತಿರುಗಿಸುತ್ತವೆ.
.then() ಏನು ಮಾಡುತ್ತದೆ?
ಅನೇಕ ಜನರು .then() ಡೇಟಾವನ್ನು ಪಡೆಯುತ್ತದೆ ಎಂದು ಭಾವಿಸುತ್ತಾರೆ. ಆದರೆ ಅದು ಹಾಗಲ್ಲ.
.then() ಒಂದು callback function ಅನ್ನು ನೋಂದಾಯಿಸುತ್ತದೆ. ನೀವು JavaScript ಗೆ ಹೀಗೆ ಹೇಳುತ್ತೀರಿ: "ಈ Promise ಮುಗಿದಾಗ, ಈ function ಅನ್ನು ಚಲಾಯಿಸು."
ಇದು ಡೆಲಿವರಿ ಆಪ್ನಂತಿದೆ. ನೀವು ಆಹಾರವನ್ನು ಆರ್ಡರ್ ಮಾಡಿದಾಗ, ಆಪ್ ಹೀಗೆ ಹೇಳುತ್ತದೆ: "ಆಹಾರ ಬಂದಾಗ ನನಗೆ ಕರೆ ಮಾಡಿ." ಆ function ಫಲಿತಾಂಶಕ್ಕಾಗಿ ಕಾಯುತ್ತದೆ.
Async/Await ಅನ್ನು ಏಕೆ ಬಳಸಬೇಕು?
ಬಳಕೆದಾರರ ಡೇಟಾ (user data), ನಂತರ ಪೋಸ್ಟ್ಗಳು (posts), ನಂತರ ಕಾಮೆಂಟ್ಗಳನ್ನು (comments) ಪಡೆಯಲು ನೀವು .then() ಕರೆಗಳನ್ನು ಸರಪಳಿಯಂತೆ (chain) ಜೋಡಿಸಬಹುದು. ಇದು ಕೆಲಸ ಮಾಡುತ್ತದೆ, ಆದರೆ ಉದ್ದವಾದ ಸರಪಳಿಗಳನ್ನು ಓದುವುದು ಕಷ್ಟವಾಗುತ್ತದೆ.
Async/await ಕೋಡ್ ಅನ್ನು ಸಾಮಾನ್ಯ, ಹಂತ-ಹಂತದ ಕೋಡ್ನಂತೆ ಕಾಣುವಂತೆ ಮಾಡುತ್ತದೆ. ಇದು ಹೆಚ್ಚು ಸುಂದರ ಮತ್ತು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ಸುಲಭವಾಗಿದೆ.
await JavaScript ಅನ್ನು block ಮಾಡುತ್ತದೆಯೇ?
ಇದು ಸಾಮಾನ್ಯ ಸಂದರ್ಶನದ (interview) ಪ್ರಶ್ನೆಯಾಗಿದೆ. ಉತ್ತರ 'ಇಲ್ಲ'.
JavaScript ಒಂದು await ಕೀವರ್ಡ್ ಅನ್ನು ತಲುಪಿದಾಗ, ಅದು ಕೇವಲ ಆ ನಿರ್ದಿಷ್ಟ async function ಅನ್ನು ಮಾತ್ರ ಸ್ಥಗಿತಗೊಳಿಸುತ್ತದೆ (pause). ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ನ ಉಳಿದ ಭಾಗಗಳು ಚಲಿಸುವುದನ್ನು ಮುಂದುವರಿಸುತ್ತವೆ.
ಉದಾಹರಣೆಯ ಹರಿವು (Example flow):
- async function ನಲ್ಲಿನ ಕೋಡ್ ಅನ್ನು ಚಲಾಯಿಸಿ.
- await ಅನ್ನು ತಲುಪಿ ಮತ್ತು ಆ function ಅನ್ನು ಸ್ಥಗಿತಗೊಳಿಸಿ.
- ಅಪ್ಲಿಕೇಶನ್ನ ಉಳಿದ ಭಾಗಗಳನ್ನು ಚಲಾಯಿಸಿ.
- ಕಾರ್ಯವು ಮುಗಿದಾಗ, async function ಅನ್ನು ಪುನರಾರಂಭಿಸಿ.
Async/await ಎಂಬುದು ಕೇವಲ Promises ಬರೆಯಲು ಇರುವ ಒಂದು ಸುಂದರವಾದ ಮಾರ್ಗವಾಗಿದೆ. ಇದು syntactic sugar ಆಗಿದೆ.
ಪ್ರಮುಖ ಅಂಶಗಳು (Key takeaways):
- Promise = ಭವಿಷ್ಯದ ಮೌಲ್ಯ.
- fetch() = ಒಂದು Promise ಅನ್ನು ಹಿಂತಿರುಗಿಸುತ್ತದೆ.
- .then() = ಸಿದ್ಧವಾದಾಗ ಇದನ್ನು ಚಲಾಯಿಸಿ.
- await = ಈ function ಅನ್ನು ಮಾತ್ರ ಸ್ಥಗಿತಗೊಳಿಸಿ, ಇಡೀ ಪ್ರೋಗ್ರಾಂ ಅನ್ನು ಅಲ್ಲ.
- async/await = ಸುಂದರವಾದ Promise syntax.
ಮೂಲ: https://dev.to/aarthirs/javascript-promises-asyncawait-explained-with-a-real-life-example-43bm