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 ਚਲਾਓ।"
ਇਹ ਇੱਕ ਡਿਲੀਵਰੀ ਐਪ ਵਾਂਗ ਹੈ। ਤੁਸੀਂ ਖਾਣਾ ਆਰਡਰ ਕਰਦੇ ਹੋ, ਅਤੇ ਐਪ ਕਹਿੰਦੀ ਹੈ: "ਜਦੋਂ ਖਾਣਾ ਆ ਜਾਵੇ ਤਾਂ ਮੈਨੂੰ ਕਾਲ ਕਰੋ।" ਫੰਕਸ਼ਨ ਨਤੀਜੇ ਦੀ ਉਡੀਕ ਕਰਦਾ ਹੈ।
Async/Await ਦੀ ਵਰਤੋਂ ਕਿਉਂ ਕਰੀਏ?
ਤੁਸੀਂ ਯੂਜ਼ਰ ਡੇਟਾ, ਫਿਰ ਪੋਸਟਾਂ, ਅਤੇ ਫਿਰ ਕੁਮੈਂਟਾਂ ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ .then() ਕਾਲਾਂ ਨੂੰ ਚੇਨ (chain) ਕਰ ਸਕਦੇ ਹੋ। ਇਹ ਕੰਮ ਕਰਦਾ ਹੈ, ਪਰ ਲੰਬੀਆਂ ਚੇਨਾਂ ਨੂੰ ਪੜ੍ਹਨਾ ਮੁਸ਼ਕਲ ਹੁੰਦਾ ਹੈ।
Async/await ਕੋਡ ਨੂੰ ਆਮ, ਸਟੈਪ-ਬਾਈ-ਸਟੈਪ ਕੋਡ ਵਾਂਗ ਦਿਖਾਉਂਦਾ ਹੈ। ਇਹ ਵਧੇਰੇ ਸਾਫ਼ ਅਤੇ ਸਮਝਣ ਵਿੱਚ ਆਸਾਨ ਹੈ।
ਕੀ await JavaScript ਨੂੰ ਬਲਾਕ (block) ਕਰਦਾ ਹੈ?
ਇਹ ਇੱਕ ਆਮ ਇੰਟਰਵਿਊ ਪ੍ਰਸ਼ਨ ਹੈ। ਇਸਦਾ ਜਵਾਬ ਹੈ - ਨਹੀਂ।
ਜਦੋਂ JavaScript await ਕੀਵਰਡ 'ਤੇ ਪਹੁੰਚਦਾ ਹੈ, ਤਾਂ ਇਹ ਸਿਰਫ਼ ਉਸ ਖਾਸ async function ਨੂੰ ਰੋਕਦਾ (pause) ਹੈ। ਤੁਹਾਡੀ ਬਾਕੀ ਐਪਲੀਕੇਸ਼ਨ ਚੱਲਦੀ ਰਹਿੰਦੀ ਹੈ।
ਉਦਾਹਰਨ ਵਜੋਂ ਪ੍ਰਵਾਹ (Example flow):
- async function ਵਿੱਚ ਕੋਡ ਚਲਾਓ।
await'ਤੇ ਪਹੁੰਚੋ ਅਤੇ ਉਸ function ਨੂੰ ਰੋਕ ਦਿਓ।- ਐਪਲੀਕੇਸ਼ਨ ਦੇ ਬਾਕੀ ਹਿੱਸੇ ਨੂੰ ਚਲਾਓ।
- ਜਦੋਂ ਕੰਮ ਖਤਮ ਹੋ ਜਾਂਦਾ ਹੈ, ਤਾਂ async function ਨੂੰ ਦੁਬਾਰਾ ਸ਼ੁਰੂ ਕਰੋ।
Async/await ਸਿਰਫ਼ Promises ਲਿਖਣ ਦਾ ਇੱਕ ਸਾਫ਼ ਤਰੀਕਾ ਹੈ। ਇਹ ਇੱਕ syntactic sugar ਹੈ।
ਮੁੱਖ ਗੱਲਾਂ (Key takeaways):
- Promise = ਇੱਕ ਭਵਿੱਖ ਦੀ value।
fetch()= ਇੱਕ Promise ਰਿਟਰਨ ਕਰਦਾ ਹੈ।.then()= ਤਿਆਰ ਹੋਣ 'ਤੇ ਇਹ ਚਲਾਓ।await= ਇਸ function ਨੂੰ ਰੋਕੋ, ਪੂਰੇ ਪ੍ਰੋਗਰਾਮ ਨੂੰ ਨਹੀਂ।- async/await = ਸਾਫ਼ Promise syntax।
Source: https://dev.to/aarthirs/javascript-promises-asyncawait-explained-with-a-real-life-example-43bm