𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗣𝗿𝗼𝗺𝗶𝘀𝗲𝘀 ಮತ್ತು Async/Await ವಿವರಣೆ
ಆನ್ಲೈನ್ನಲ್ಲಿ ಪಿಜ್ಜಾ ಆರ್ಡರ್ ಮಾಡುವುದನ್ನು ನೆನಪಿಸಿಕೊಳ್ಳಿ.
ನೀವು ಆರ್ಡರ್ ಮಾಡುತ್ತೀರಿ. ಅದು ಬರುವವರೆಗೆ ನೀವು ಬಾಗಿಲ ಬಳಿ ಏನೂ ಮಾಡದೆ ನಿಂತಿರುವುದಿಲ್ಲ. ನೀವು ವಿಡಿಯೋಗಳನ್ನು ನೋಡುತ್ತೀರಿ, ಕೆಲಸ ಮಾಡುತ್ತೀರಿ ಅಥವಾ ಸ್ನೇಹಿತರೊಂದಿಗೆ ಮಾತನಾಡುತ್ತೀರಿ. ಪಿಜ್ಜಾ ಬಂದಾಗ, ನೀವು ಅದನ್ನು ತಿನ್ನುತ್ತೀರಿ.
JavaScript ಕೂಡ ಇದೇ ರೀತಿ ಕೆಲಸ ಮಾಡುತ್ತದೆ.
API requests, database calls ಮತ್ತು timers ನಂತಹ ಕಾರ್ಯಾಚರಣೆಗಳಿಗೆ ಸಮಯ ಬೇಕಾಗುತ್ತದೆ. ಒಂದು ವೇಳೆ JavaScript ಪ್ರತಿ ಕೆಲಸವೂ ಮುಗಿಯುವವರೆಗೆ ಕಾಯುತ್ತಿದ್ದರೆ, ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ಸ್ಥಗಿತಗೊಳ್ಳುತ್ತದೆ (freeze ಆಗುತ್ತದೆ). ಬದಲಾಗಿ, ಫಲಿತಾಂಶಕ್ಕಾಗಿ ಕಾಯುವಾಗ JavaScript ಇತರ ಕೋಡ್ಗಳನ್ನು ಚಲಾಯಿಸುತ್ತದೆ.
Promise ಎಂದರೇನು?
Promise ಎಂಬುದು ಭವಿಷ್ಯದಲ್ಲಿ ನೀವು ಪಡೆಯಲಿರುವ ಮೌಲ್ಯಕ್ಕಾಗಿ (value) ಇರುವ ಒಂದು ಪ್ಲೇಸ್ಹೋಲ್ಡರ್ (placeholder).
ನೀವು ಇದನ್ನು ರನ್ ಮಾಡಿದಾಗ:
const promise = fetch("/users");
ಡೇಟಾ ಇನ್ನೂ ಲಭ್ಯವಿಲ್ಲ. Promise ಹೀಗೆ ಹೇಳುತ್ತದೆ: "ನನ್ನ ಬಳಿ ಈಗ ಫಲಿತಾಂಶವಿಲ್ಲ, ಆದರೆ ಅದು ಸಿದ್ಧವಾದಾಗ ನಾನು ನಿಮಗೆ ತಿಳಿಸುತ್ತೇನೆ."
Promise ಮೂರು ಸ್ಥಿತಿಗಳನ್ನು (states) ಹೊಂದಿದೆ:
- Pending
- Fulfilled (ಯಶಸ್ಸು)
- Rejected (ಅಪಯಶಸ್ಸು)
fetch() ನಂತಹ ಹೆಚ್ಚಿನ ಆಧುನಿಕ APIಗಳು ಸ್ವಯಂಚಾಲಿತವಾಗಿ Promise ಅನ್ನು ಹಿಂತಿರುಗಿಸುತ್ತವೆ. ನೀವು ಪ್ರತಿ ಬಾರಿಯೂ ಅವುಗಳನ್ನು ಮ್ಯಾನುಯಲ್ ಆಗಿ ರಚಿಸುವ ಅಗತ್ಯವಿಲ್ಲ. ನೀವು ಅವುಗಳನ್ನು ಬಳಸಿದರೆ ಸಾಕು.
.then() ಏನು ಮಾಡುತ್ತದೆ?
ಅನೇಕ ಜನರು .then() ಡೇಟಾವನ್ನು ಪಡೆಯುತ್ತದೆ ಎಂದು ಭಾವಿಸುತ್ತಾರೆ. ಆದರೆ ಅದು ಹಾಗಲ್ಲ.
.then() ಒಂದು callback function ಅನ್ನು ನೋಂದಾಯಿಸುತ್ತದೆ. ನೀವು JavaScript ಗೆ ಹೀಗೆ ಹೇಳುತ್ತಿದ್ದೀರಿ: "ಈ Promise ಮುಗಿದಾಗ, ಈ ನಿರ್ದಿಷ್ಟ ಫಂಕ್ಷನ್ ಅನ್ನು ಚಲಾಯಿಸು."
ಇದು ಆಹಾರ ವಿತರಣಾ ಅಪ್ಲಿಕೇಶನ್ನಂತೆ (food delivery app). ನೀವು ಆಹಾರವನ್ನು ಆರ್ಡರ್ ಮಾಡುತ್ತೀರಿ ಮತ್ತು ಅಪ್ಲಿಕೇಶನ್ ನಿಮಗೆ ಹೀಗೆ ಹೇಳುತ್ತದೆ: "ಆಹಾರ ಬಂದಾಗ ನನಗೆ ಕರೆ ಮಾಡಿ." ಫಂಕ್ಷನ್ ಆ ಸಿಗ್ನಲ್ಗಾಗಿ ಕಾಯುತ್ತದೆ.
Async/Await ಅನ್ನು ಏಕೆ ಬಳಸಬೇಕು?
ಡೇಟಾವನ್ನು ಹಂತ ಹಂತವಾಗಿ ಪಡೆಯಲು ನೀವು .then() ಕರೆಗಳನ್ನು ಚೇನ್ (chain) ಮಾಡಬಹುದು. ಇದು ಕೆಲಸ ಮಾಡುತ್ತದೆ, ಆದರೆ ಉದ್ದವಾದ ಚೇನ್ಗಳನ್ನು ಓದುವುದು ಕಷ್ಟವಾಗುತ್ತದೆ.
Async/await ನಿಮ್ಮ ಕೋಡ್ ಅನ್ನು ಸಾಮಾನ್ಯ, ಹಂತ-ಹಂತದ ಕೋಡ್ನಂತೆ ಕಾಣುವಂತೆ ಮಾಡುತ್ತದೆ. ಇದು ಹೆಚ್ಚು ಸ್ವಚ್ಛವಾಗಿದೆ ಮತ್ತು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ಸುಲಭವಾಗಿದೆ.
await JavaScript ಅನ್ನು ಬ್ಲಾಕ್ (block) ಮಾಡುವುದೇ?
ಇದು ಸಾಮಾನ್ಯ ಸಂದರ್ಶನದ (interview) ಪ್ರಶ್ನೆಯಾಗಿದೆ. ಉತ್ತರ 'ಇಲ್ಲ'.
JavaScript ಒಂದು await ಕೀವರ್ಡ್ ಅನ್ನು ತಲುಪಿದಾಗ, ಅದು ಕೇವಲ ಆ ನಿರ್ದಿಷ್ಟ async ಫಂಕ್ಷನ್ ಅನ್ನು ಮಾತ್ರ ಸ್ಥಗಿತಗೊಳಿಸುತ್ತದೆ (pause ಮಾಡುತ್ತದೆ). ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ನ ಉಳಿದ ಭಾಗಗಳು ಚಾಲನೆಯಲ್ಲಿರುತ್ತವೆ.
ಉದಾಹರಣೆಯ ಹರಿವು (Example flow):
- ಫಂಕ್ಷನ್ನಲ್ಲಿರುವ ಕೋಡ್ ಅನ್ನು ಚಲಾಯಿಸಿ.
- await ಅನ್ನು ತಲುಪಿ ಮತ್ತು ಆ ಫಂಕ್ಷನ್ ಅನ್ನು ಸ್ಥಗಿತಗೊಳಿಸಿ.
- ಸ್ಕ್ರಿಪ್ಟ್ನ ಉಳಿದ ಭಾಗವನ್ನು ಚಲಾಯಿಸಿ.
- ಕೆಲಸ ಮುಗಿದ ನಂತರ, ಫಂಕ್ಷನ್ ಅನ್ನು ಪುನರಾರಂಭಿಸಿ.
ಸಾರಾಂಶ (Summary):
- Promise = ಭವಿಷ್ಯದ ಮೌಲ್ಯ (future value).
- fetch() = Promise ಅನ್ನು ಹಿಂತಿರುಗಿಸುತ್ತದೆ.
- .then() = ಸಿದ್ಧವಾದಾಗ ಈ ಫಂಕ್ಷನ್ ಅನ್ನು ಚಲಾಯಿಸಿ.
- await = ಈ ಫಂಕ್ಷನ್ ಅನ್ನು ಮಾತ್ರ ಸ್ಥಗಿತಗೊಳಿಸಿ, ಇಡೀ ಪ್ರೋಗ್ರಾಂ ಅನ್ನು ಅಲ್ಲ.
- async/await = Promises ಬರೆಯಲು ಒಂದು ಸ್ವಚ್ಛವಾದ ವಿಧಾನ.
Source: https://dev.to/aarthirs/javascript-promises-asyncawait-explained-with-a-real-life-example-43bm