JavaScript Promises-ഉം Async/Await-ഉം വിശദീകരിക്കുന്നു
നിങ്ങൾ ഓൺലൈനായി ഒരു പിസ്സ ഓർഡർ ചെയ്യുന്നു എന്ന് സങ്കൽപ്പിക്കുക.
അത് എത്തുന്നതുവരെ വെറുതെ വാതിലിന് മുന്നിൽ നിൽക്കുകയല്ല നിങ്ങൾ ചെയ്യുന്നത്. നിങ്ങൾ വീഡിയോകൾ കാണുകയോ, ജോലി ചെയ്യുകയോ, അല്ലെങ്കിൽ സുഹൃത്തുക്കളോട് സംസാരിക്കുകയോ ചെയ്തുകൊണ്ടിരിക്കും. പിസ്സ എത്തുമ്പോൾ നിങ്ങൾ അത് കഴിക്കുന്നു.
JavaScript-ഉം ഇതേ രീതിയിലാണ് പ്രവർത്തിക്കുന്നത്.
API റിക്വസ്റ്റുകൾ അല്ലെങ്കിൽ ഡാറ്റാബേസ് കോളുകൾ പോലുള്ള ജോലികൾക്ക് സമയം എടുക്കും. ഓരോ ജോലിക്കും വേണ്ടി JavaScript കാത്തുനിന്നാൽ നിങ്ങളുടെ ആപ്പ് ഫ്രീസ് (freeze) ആയിപ്പോകും. പകരം, കാത്തുനിൽക്കുമ്പോൾ തന്നെ മറ്റ് കോഡുകൾ പ്രവർത്തിപ്പിക്കാൻ അത് സഹായിക്കുന്നു.
ഭാവിയിൽ ലഭിക്കാനിരിക്കുന്ന ഒരു മൂല്യത്തെയാണ് (value) ഒരു Promise പ്രതിനിധീകരിക്കുന്നത്.
ഒരു Promise-ന് മൂന്ന് അവസ്ഥകളുണ്ട് (states):
- Pending
- Fulfilled (വിജയം)
- Rejected (പരാജയം)
പുതിയൊരു Promise നിർമ്മിക്കാൻ ഉപയോഗിക്കുന്ന കോഡ് നിങ്ങൾ അപൂർവ്വമായി മാത്രമേ കാണാറുള്ളൂ. കാരണം fetch() പോലുള്ള ആധുനിക ടൂളുകൾ നിങ്ങൾക്ക് വേണ്ടി നേരത്തെ തന്നെ ഒരു Promise നൽകുന്നുണ്ട്.
.then() എന്താണ് ചെയ്യുന്നത്?
.then() ഡാറ്റ ശേഖരിക്കുന്നു എന്നാണ് പലരും കരുതുന്നത്. എന്നാൽ അത് ശരിയല്ല.
.then() ഒരു callback function രജിസ്റ്റർ ചെയ്യുന്നു. "ഈ Promise പൂർത്തിയാകുമ്പോൾ, ഈ ഫങ്ക്ഷൻ പ്രവർത്തിപ്പിക്കുക" എന്ന് നിങ്ങൾ JavaScript-നോട് പറയുന്നു.
ഇത് ഒരു ഡെലിവറി ആപ്പ് പോലെയാണ്. നിങ്ങൾ ഭക്ഷണം ഓർഡർ ചെയ്യുന്നു, ആപ്പ് പറയുന്നു: "ഭക്ഷണം എത്തുമ്പോൾ എന്നെ വിളിക്കൂ." ആ ഫങ്ക്ഷൻ ഫലത്തിനായി കാത്തുനിൽക്കുന്നു.
എന്തുകൊണ്ടാണ് Async/Await ഉപയോഗിക്കുന്നത്?
യൂസർ ഡാറ്റ, പോസ്റ്റുകൾ, കമന്റുകൾ എന്നിവ ലഭിക്കാൻ നിങ്ങൾക്ക് .then() കോളുകൾ പരസ്പരം ബന്ധിപ്പിക്കാം (chain). ഇത് പ്രവർത്തിക്കും, പക്ഷേ നീളമുള്ള ഇത്തരം ചെയിനുകൾ വായിക്കാൻ പ്രയാസമാണ്.
Async/await കോഡിനെ സാധാരണമായ, ഘട്ടം ഘട്ടമായുള്ള കോഡ് പോലെയാക്കുന്നു. ഇത് കൂടുതൽ വൃത്തിയുള്ളതും പിന്തുടരാൻ എളുപ്പവുമാണ്.
await JavaScript-നെ ബ്ലോക്ക് (block) ചെയ്യുന്നുണ്ടോ?
ഇതൊരു സാധാരണ ഇന്റർവ്യൂ ചോദ്യമാണ്. ഉത്തരം 'ഇല്ല' എന്നാണ്.
JavaScript ഒരു await കീവേഡിൽ എത്തുമ്പോൾ, ആ പ്രത്യേക async ഫങ്ക്ഷൻ മാത്രമേ അത് നിർത്തിവെക്കുന്നുള്ളൂ. നിങ്ങളുടെ ആപ്ലിക്കേഷന്റെ ബാക്കി ഭാഗങ്ങൾ പ്രവർത്തിച്ചുകൊണ്ടിരിക്കും.
Example flow:
- async ഫങ്ക്ഷനിലെ കോഡ് പ്രവർത്തിക്കുന്നു.
- await-ൽ എത്തുമ്പോൾ ആ ഫങ്ക്ഷൻ നിർത്തിവെക്കുന്നു.
- ആപ്ലിക്കേഷന്റെ ബാക്കി ഭാഗങ്ങൾ പ്രവർത്തിക്കുന്നു.
- ജോലി പൂർത്തിയാകുമ്പോൾ, async ഫങ്ക്ഷൻ വീണ്ടും പ്രവർത്തിപ്പിക്കുന്നു.
Promises എഴുതാനുള്ള കൂടുതൽ വൃത്തിയുള്ള ഒരു രീതി മാത്രമാണ് Async/await. ഇതിനെ syntactic sugar എന്ന് വിളിക്കാം.
Key takeaways:
- Promise = ഭാവിയിൽ ലഭിക്കാനിരിക്കുന്ന ഒരു മൂല്യം.
- fetch() = ഒരു Promise നൽകുന്നു.
- .then() = തയ്യാറാകുമ്പോൾ ഇത് പ്രവർത്തിപ്പിക്കുക.
- await = ഈ ഫങ്ക്ഷൻ മാത്രം നിർത്തിവെക്കുക, പ്രോഗ്രാം മുഴുവനായല്ല.
- async/await = കൂടുതൽ വൃത്തിയുള്ള Promise syntax.
Source: https://dev.to/aarthirs/javascript-promises-asyncawait-explained-with-a-real-life-example-43bm