JavaScript Promises మరియు Async/Await వివరణ

మీరు ఆన్‌లైన్‌లో ఒక పిజ్జా ఆర్డర్ చేసినట్లు ఊహించుకోండి.

అది వచ్చే వరకు మీరు ఏమీ చేయకుండా మీ తలుపు దగ్గరే నిలబడరు. మీరు వీడియోలు చూస్తారు, పని చేస్తారు లేదా స్నేహితులతో మాట్లాడుతారు. పిజ్జా వచ్చినప్పుడు, మీరు తింటారు.

JavaScript కూడా అదే విధంగా పనిచేస్తుంది.

API requests లేదా database calls వంటి పనులకు సమయం పడుతుంది. ఒకవేళ JavaScript ప్రతి పని కోసం వేచి చూస్తే, మీ యాప్ ఫ్రీజ్ (freeze) అయిపోతుంది. దానికి బదులుగా, అది వేచి ఉన్న సమయంలో ఇతర కోడ్‌ను రన్ చేస్తూనే ఉంటుంది.

Promise అనేది భవిష్యత్తులో వచ్చే ఒక విలువను (value) సూచిస్తుంది.

Promise మూడు స్టేట్‌లను (states) కలిగి ఉంటుంది:

కొత్త Promiseని సృష్టించడానికి ఉపయోగించే కోడ్‌ను మీరు అరుదుగా చూస్తారు. ఎందుకంటే fetch() వంటి ఆధునిక సాధనాలు ఇప్పటికే మీ కోసం ఒక Promiseని తిరిగి ఇస్తాయి.

.then() ఏం చేస్తుంది?

చాలా మంది .then() డేటాను పొందుతుందని (retrieves) అనుకుంటారు. కానీ అది కాదు.

.then() ఒక callback functionని రిజిస్టర్ చేస్తుంది. మీరు JavaScriptకి ఇలా చెబుతారు: "ఈ Promise పూర్తయినప్పుడు, ఈ functionని రన్ చేయి."

ఇది ఒక డెలివరీ యాప్‌లా ఉంటుంది. మీరు ఆహారాన్ని ఆర్డర్ చేస్తారు, అప్పుడు యాప్ ఇలా చెబుతుంది: "ఆహారం వచ్చినప్పుడు నాకు కాల్ చేయండి." ఆ function ఫలితం కోసం వేచి ఉంటుంది.

Async/Await ఎందుకు ఉపయోగించాలి?

యూజర్ డేటా, తర్వాత పోస్ట్‌లు, ఆ తర్వాత కామెంట్లు పొందడానికి మీరు .then() కాల్స్‌ను చైన్ (chain) చేయవచ్చు. ఇది పనిచేస్తుంది, కానీ పొడవైన చైన్‌లను చదవడం కష్టం.

Async/await కోడ్‌ను సాధారణ, స్టెప్-బై-స్టెప్ కోడ్‌లా చూపిస్తుంది. ఇది మరింత స్పష్టంగా మరియు అనుసరించడానికి సులభంగా ఉంటుంది.

await JavaScriptని బ్లాక్ (block) చేస్తుందా?

ఇది ఒక సాధారణ ఇంటర్వ్యూ ప్రశ్న. సమాధానం కాదు.

JavaScript ఒక await కీవర్డ్‌ను చేరుకున్నప్పుడు, అది కేవలం ఆ నిర్దిష్ట async functionని మాత్రమే ఆపుతుంది (pause). మీ అప్లికేషన్ యొక్క మిగిలిన భాగం రన్ అవుతూనే ఉంటుంది.

ఉదాహరణ ఫ్లో (Example flow):

  1. async functionలో కోడ్‌ను రన్ చేయండి.
  2. awaitని చేరుకుని ఆ functionని ఆపండి.
  3. అప్లికేషన్ యొక్క మిగిలిన భాగాన్ని రన్ చేయండి.
  4. పని పూర్తయినప్పుడు, async functionని తిరిగి ప్రారంభించండి.

Async/await అనేది కేవలం Promisesని వ్రాయడానికి ఒక స్పష్టమైన మార్గం మాత్రమే. ఇది ఒక syntactic sugar.

ముఖ్యమైన అంశాలు (Key takeaways):

Source: https://dev.to/aarthirs/javascript-promises-asyncawait-explained-with-a-real-life-example-43bm