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