ഉദാഹരണങ്ങൾ ഉപയോഗിച്ച് JavaScript-ൽ Async/Await നോക്കാം

ലേഖനത്തിന്റെ രചയിതാവ് JavaScript-ലെ Async/Await-ന്റെ ഉദാഹരണങ്ങൾ പരിശോധിക്കുന്നു. മൊത്തത്തിൽ, അസിൻക്രണസ് കോഡ് എഴുതാനുള്ള സൗകര്യപ്രദമായ മാർഗമാണ് Async/Await. ഈ സവിശേഷത പ്രത്യക്ഷപ്പെടുന്നതിന് മുമ്പ്, അത്തരം കോഡ് കോൾബാക്കുകളും വാഗ്ദാനങ്ങളും ഉപയോഗിച്ച് എഴുതിയിരുന്നു. യഥാർത്ഥ ലേഖനത്തിന്റെ രചയിതാവ് വിവിധ ഉദാഹരണങ്ങൾ വിശകലനം ചെയ്തുകൊണ്ട് Async/Await ന്റെ ഗുണങ്ങൾ വെളിപ്പെടുത്തുന്നു.

ഞങ്ങൾ ഓർമ്മിപ്പിക്കുന്നു: "Habr"-ന്റെ എല്ലാ വായനക്കാർക്കും - "Habr" പ്രൊമോഷണൽ കോഡ് ഉപയോഗിച്ച് ഏതെങ്കിലും സ്കിൽബോക്സ് കോഴ്സിൽ ചേരുമ്പോൾ 10 റൂബിൾസ് കിഴിവ്.

സ്കിൽബോക്സ് ശുപാർശ ചെയ്യുന്നു: വിദ്യാഭ്യാസ ഓൺലൈൻ കോഴ്സ് "ജാവ ഡെവലപ്പർ".

തിരിച്ചുവിളിക്കുക

കോൾ അനിശ്ചിതമായി വൈകുന്ന ഒരു ഫംഗ്‌ഷനാണ് കോൾബാക്ക്. മുമ്പ്, ഫലം ഉടനടി ലഭിക്കാത്ത കോഡിന്റെ മേഖലകളിൽ കോൾബാക്കുകൾ ഉപയോഗിച്ചിരുന്നു.

Node.js-ൽ ഒരു ഫയൽ അസമന്വിതമായി വായിക്കുന്നതിനുള്ള ഒരു ഉദാഹരണം ഇതാ:

fs.readFile(__filename, 'utf-8', (err, data) => {
  if (err) {
    throw err;
  }
  console.log(data);
});

നിങ്ങൾക്ക് ഒരേസമയം നിരവധി അസിൻക്രണസ് പ്രവർത്തനങ്ങൾ നടത്തേണ്ടിവരുമ്പോൾ പ്രശ്നങ്ങൾ ഉണ്ടാകുന്നു. നമുക്ക് ഈ സാഹചര്യം സങ്കൽപ്പിക്കാം: Arfat ഉപയോക്തൃ ഡാറ്റാബേസിലേക്ക് ഒരു അഭ്യർത്ഥന നടത്തുന്നു, നിങ്ങൾ അതിന്റെ profile_img_url ഫീൽഡ് വായിക്കുകയും someserver.com സെർവറിൽ നിന്ന് ഒരു ചിത്രം ഡൗൺലോഡ് ചെയ്യുകയും വേണം.
ഡൗൺലോഡ് ചെയ്ത ശേഷം, ഞങ്ങൾ ചിത്രം മറ്റൊരു ഫോർമാറ്റിലേക്ക് പരിവർത്തനം ചെയ്യുന്നു, ഉദാഹരണത്തിന് PNG-ൽ നിന്ന് JPEG-ലേക്ക്. പരിവർത്തനം വിജയകരമാണെങ്കിൽ, ഉപയോക്താവിന്റെ ഇമെയിലിലേക്ക് ഒരു കത്ത് അയയ്ക്കും. അടുത്തതായി, ഇവന്റിനെ കുറിച്ചുള്ള വിവരങ്ങൾ Transformations.log ഫയലിൽ നൽകി, തീയതി സൂചിപ്പിക്കുന്നു.

കോഡിന്റെ അവസാന ഭാഗത്ത് കോൾബാക്കുകളുടെ ഓവർലാപ്പും }) എന്ന വലിയ സംഖ്യയും ശ്രദ്ധിക്കേണ്ടതാണ്. ഇതിനെ കോൾബാക്ക് ഹെൽ അല്ലെങ്കിൽ പിരമിഡ് ഓഫ് ഡൂം എന്ന് വിളിക്കുന്നു.

ഈ രീതിയുടെ പോരായ്മകൾ വ്യക്തമാണ്:

• ഈ കോഡ് വായിക്കാൻ പ്രയാസമാണ്.
• പിശകുകൾ കൈകാര്യം ചെയ്യുന്നതും ബുദ്ധിമുട്ടാണ്, ഇത് പലപ്പോഴും മോശം കോഡ് ഗുണനിലവാരത്തിലേക്ക് നയിക്കുന്നു.

ഈ പ്രശ്നം പരിഹരിക്കാൻ, JavaScript-ൽ വാഗ്ദാനങ്ങൾ ചേർത്തു. .പിന്നെ എന്ന വാക്ക് ഉപയോഗിച്ച് കോൾബാക്കുകളുടെ ആഴത്തിലുള്ള നെസ്റ്റിംഗ് മാറ്റിസ്ഥാപിക്കാൻ അവ നിങ്ങളെ അനുവദിക്കുന്നു.

വാഗ്ദാനങ്ങളുടെ പോസിറ്റീവ് വശം, അവ കോഡ് ഇടത്തുനിന്ന് വലത്തോട്ട് വായിക്കുന്നതിനുപകരം മുകളിൽ നിന്ന് താഴേക്ക് കൂടുതൽ മികച്ചതാക്കുന്നു എന്നതാണ്. എന്നിരുന്നാലും, വാഗ്ദാനങ്ങൾക്കും അവരുടെ പ്രശ്നങ്ങളുണ്ട്:

• നിങ്ങൾ ഒരുപാട് .അപ്പോൾ ചേർക്കേണ്ടതുണ്ട്.
• try/catch എന്നതിനുപകരം, എല്ലാ പിശകുകളും കൈകാര്യം ചെയ്യാൻ .catch ഉപയോഗിക്കുന്നു.
• ഒരു ലൂപ്പിനുള്ളിൽ ഒന്നിലധികം വാഗ്ദാനങ്ങളുമായി പ്രവർത്തിക്കുന്നത് എല്ലായ്പ്പോഴും സൗകര്യപ്രദമല്ല; ചില സന്ദർഭങ്ങളിൽ, അവ കോഡ് സങ്കീർണ്ണമാക്കുന്നു.

അവസാന പോയിന്റിന്റെ അർത്ഥം കാണിക്കുന്ന ഒരു പ്രശ്നം ഇതാ.

ക്രമരഹിതമായ ഇടവേളകളിൽ (0–n സെക്കൻഡ്) 10 മുതൽ 0 വരെയുള്ള സംഖ്യകളുടെ ഒരു ക്രമം പ്രിന്റ് ചെയ്യുന്ന ഒരു ഫോർ ലൂപ്പ് ഉണ്ടെന്ന് കരുതുക. വാഗ്ദാനങ്ങൾ ഉപയോഗിച്ച്, നിങ്ങൾ ഈ ലൂപ്പ് മാറ്റേണ്ടതുണ്ട്, അങ്ങനെ സംഖ്യകൾ 0 മുതൽ 10 വരെയുള്ള ക്രമത്തിൽ പ്രിന്റ് ചെയ്യപ്പെടും. അതിനാൽ, ഒരു പൂജ്യം പ്രിന്റ് ചെയ്യാൻ 6 സെക്കൻഡും ഒരെണ്ണം പ്രിന്റ് ചെയ്യാൻ 2 സെക്കൻഡും എടുക്കുകയാണെങ്കിൽ, ആദ്യം പൂജ്യം പ്രിന്റ് ചെയ്യണം, തുടർന്ന് അച്ചടിക്കുന്നതിനുള്ള കൗണ്ട്ഡൗൺ ആരംഭിക്കും.

തീർച്ചയായും, ഈ പ്രശ്നം പരിഹരിക്കാൻ ഞങ്ങൾ Async/Await അല്ലെങ്കിൽ .sort ഉപയോഗിക്കുന്നില്ല. ഒരു ഉദാഹരണ പരിഹാരം അവസാനം ആണ്.

Async പ്രവർത്തനങ്ങൾ

ES2017 (ES8)-ലെ അസിൻക് ഫംഗ്‌ഷനുകളുടെ കൂട്ടിച്ചേർക്കൽ വാഗ്ദാനങ്ങളുമായി പ്രവർത്തിക്കാനുള്ള ചുമതല ലളിതമാക്കി. അസിൻക് ഫംഗ്ഷനുകൾ വാഗ്ദാനങ്ങളുടെ "മുകളിൽ" പ്രവർത്തിക്കുന്നത് ഞാൻ ശ്രദ്ധിക്കുന്നു. ഈ പ്രവർത്തനങ്ങൾ ഗുണപരമായി വ്യത്യസ്തമായ ആശയങ്ങളെ പ്രതിനിധീകരിക്കുന്നില്ല. വാഗ്ദാനങ്ങൾ ഉപയോഗിക്കുന്ന കോഡിന് പകരമായി ഉദ്ദേശിച്ചിട്ടുള്ളതാണ് അസിൻക് ഫംഗ്‌ഷനുകൾ.

Async/Await ഒരു സിൻക്രണസ് ശൈലിയിൽ അസിൻക്രണസ് കോഡ് ഉപയോഗിച്ച് ജോലി സംഘടിപ്പിക്കുന്നത് സാധ്യമാക്കുന്നു.

അതിനാൽ, വാഗ്ദാനങ്ങൾ അറിയുന്നത് Async/Await-ന്റെ തത്വങ്ങൾ മനസ്സിലാക്കുന്നത് എളുപ്പമാക്കുന്നു.

വാക്യഘടന

സാധാരണയായി ഇതിൽ രണ്ട് കീവേഡുകൾ അടങ്ങിയിരിക്കുന്നു: അസിൻക്, വെയിറ്റ്. ആദ്യ വാക്ക് ഫംഗ്ഷനെ അസിൻക്രണസ് ആക്കി മാറ്റുന്നു. അത്തരം ഫംഗ്ഷനുകൾ കാത്തിരിപ്പിന്റെ ഉപയോഗം അനുവദിക്കുന്നു. മറ്റേതെങ്കിലും സാഹചര്യത്തിൽ, ഈ ഫംഗ്ഷൻ ഉപയോഗിക്കുന്നത് ഒരു പിശക് സൃഷ്ടിക്കും.

// With function declaration
 
async function myFn() {
  // await ...
}
 
// With arrow function
 
const myFn = async () => {
  // await ...
}
 
function myFn() {
  // await fn(); (Syntax Error since no async)
}
 

ഫംഗ്‌ഷൻ ഡിക്ലറേഷന്റെ തുടക്കത്തിലും ഒരു അമ്പ് ഫംഗ്‌ഷന്റെ കാര്യത്തിൽ “=” ചിഹ്നത്തിനും പരാൻതീസിസിനും ഇടയിൽ Async ചേർക്കുന്നു.

ഈ ഫംഗ്‌ഷനുകൾ ഒരു ഒബ്‌ജക്റ്റിൽ രീതികളായി സ്ഥാപിക്കാം അല്ലെങ്കിൽ ഒരു ക്ലാസ് ഡിക്ലറേഷനിൽ ഉപയോഗിക്കാം.

// As an object's method
 
const obj = {
  async getName() {
    return fetch('https://www.example.com');
  }
}
 
// In a class
 
class Obj {
  async getResource() {
    return fetch('https://www.example.com');
  }
}

NB! ക്ലാസ് കൺസ്ട്രക്‌റ്ററുകളും ഗെറ്ററുകളും/സെറ്ററുകളും അസമന്വിതമാകാൻ കഴിയില്ലെന്നത് ഓർമിക്കേണ്ടതാണ്.

സെമാന്റിക്‌സും എക്‌സിക്യൂഷൻ നിയമങ്ങളും

Async ഫംഗ്‌ഷനുകൾ അടിസ്ഥാനപരമായി സാധാരണ JS ഫംഗ്‌ഷനുകൾക്ക് സമാനമാണ്, എന്നാൽ ഒഴിവാക്കലുകളുണ്ട്.

അതിനാൽ, അസിൻക് ഫംഗ്ഷനുകൾ എല്ലായ്പ്പോഴും വാഗ്ദാനങ്ങൾ നൽകുന്നു:

async function fn() {
  return 'hello';
}
fn().then(console.log)
// hello

പ്രത്യേകമായി, fn സ്ട്രിംഗ് ഹലോ തിരികെ നൽകുന്നു. ശരി, ഇതൊരു അസിൻക്രണസ് ഫംഗ്‌ഷൻ ആയതിനാൽ, സ്ട്രിംഗ് മൂല്യം ഒരു കൺസ്‌ട്രക്‌ടർ ഉപയോഗിച്ച് ഒരു വാഗ്ദാനത്തിൽ പൊതിഞ്ഞിരിക്കുന്നു.

Async ഇല്ലാതെ ഒരു ഇതര ഡിസൈൻ ഇതാ:

function fn() {
  return Promise.resolve('hello');
}
 
fn().then(console.log);
// hello

ഈ സാഹചര്യത്തിൽ, വാഗ്ദാനം "മാനുവലായി" തിരികെ നൽകുന്നു. ഒരു അസിൻക്രണസ് ഫംഗ്‌ഷൻ എല്ലായ്പ്പോഴും ഒരു പുതിയ വാഗ്ദാനത്തിൽ പൊതിഞ്ഞിരിക്കുന്നു.

റിട്ടേൺ മൂല്യം ഒരു പ്രാകൃതമാണെങ്കിൽ, അസിൻക് ഫംഗ്ഷൻ ഒരു വാഗ്ദാനത്തിൽ പൊതിഞ്ഞ് മൂല്യം തിരികെ നൽകുന്നു. റിട്ടേൺ മൂല്യം ഒരു വാഗ്ദാന വസ്തുവാണെങ്കിൽ, അതിന്റെ റെസലൂഷൻ ഒരു പുതിയ വാഗ്ദാനത്തിൽ തിരികെ നൽകും.

const p = Promise.resolve('hello')
p instanceof Promise;
// true
 
Promise.resolve(p) === p;
// true
 

എന്നാൽ ഒരു അസിൻക്രണസ് ഫംഗ്ഷനിൽ ഒരു പിശക് ഉണ്ടെങ്കിൽ എന്ത് സംഭവിക്കും?

async function foo() {
  throw Error('bar');
}
 
foo().catch(console.log);

ഇത് പ്രോസസ്സ് ചെയ്തില്ലെങ്കിൽ, foo() നിരസിച്ചുകൊണ്ട് ഒരു വാഗ്ദാനം നൽകും. ഈ സാഹചര്യത്തിൽ, Promise.resolve എന്നതിന് പകരം ഒരു പിശക് അടങ്ങിയ Promise.reject തിരികെ നൽകും.

Async ഫംഗ്‌ഷനുകൾ എല്ലായ്‌പ്പോഴും ഒരു വാഗ്‌ദാനം നൽകുന്നു, എന്ത് തിരികെ നൽകിയാലും.

ഓരോ കാത്തിരിപ്പിലും അസിൻക്രണസ് ഫംഗ്‌ഷനുകൾ താൽക്കാലികമായി നിർത്തുന്നു.

കാത്തിരിപ്പ് ഭാവങ്ങളെ ബാധിക്കുന്നു. അതിനാൽ, പദപ്രയോഗം ഒരു വാഗ്ദാനമാണെങ്കിൽ, വാഗ്ദാനം നിറവേറ്റുന്നത് വരെ അസിൻക് ഫംഗ്ഷൻ താൽക്കാലികമായി നിർത്തിവച്ചിരിക്കുന്നു. പദപ്രയോഗം ഒരു വാഗ്ദാനമല്ലെങ്കിൽ, അത് Promise.resolve വഴി ഒരു വാഗ്ദാനമായി പരിവർത്തനം ചെയ്യുകയും തുടർന്ന് പൂർത്തിയാക്കുകയും ചെയ്യുന്നു.

// utility function to cause delay
// and get random value
 
const delayAndGetRandom = (ms) => {
  return new Promise(resolve => setTimeout(
    () => {
      const val = Math.trunc(Math.random() * 100);
      resolve(val);
    }, ms
  ));
};
 
async function fn() {
  const a = await 9;
  const b = await delayAndGetRandom(1000);
  const c = await 5;
  await delayAndGetRandom(1000);
 
  return a + b * c;
}
 
// Execute fn
fn().then(console.log);

Fn ഫംഗ്‌ഷൻ എങ്ങനെ പ്രവർത്തിക്കുന്നു എന്നതിന്റെ ഒരു വിവരണം ഇവിടെയുണ്ട്.

• അതിനെ വിളിച്ചതിന് ശേഷം, ആദ്യ വരി const a = കാത്തിരിക്കുക 9 ൽ നിന്ന് പരിവർത്തനം ചെയ്യപ്പെടുന്നു; const a = കാത്തിരിക്കുക Promise.resolve(9);.
• Await ഉപയോഗിച്ചതിന് ശേഷം, a അതിന്റെ മൂല്യം ലഭിക്കുന്നതുവരെ ഫംഗ്‌ഷൻ എക്‌സിക്യൂഷൻ താൽക്കാലികമായി നിർത്തിവച്ചിരിക്കുന്നു (നിലവിലെ സാഹചര്യത്തിൽ ഇത് 9 ആണ്).
• delayAndGetRandom(1000) fn ഫംഗ്‌ഷൻ സ്വയം പൂർത്തിയാകുന്നതുവരെ (1 സെക്കൻഡിനുശേഷം) അതിന്റെ നിർവ്വഹണം താൽക്കാലികമായി നിർത്തുന്നു. ഇത് 1 സെക്കൻഡ് നേരത്തേക്ക് fn ഫംഗ്‌ഷൻ ഫലപ്രദമായി നിർത്തുന്നു.
• delayAndGetRandom(1000) റിസോൾവ് വഴി ഒരു റാൻഡം മൂല്യം നൽകുന്നു, അത് b എന്ന വേരിയബിളിലേക്ക് അസൈൻ ചെയ്യുന്നു.
• ശരി, വേരിയബിൾ സിയുടെ കേസ് വേരിയബിൾ എയുടെ കേസിന് സമാനമാണ്. അതിനുശേഷം, എല്ലാം ഒരു നിമിഷത്തേക്ക് നിർത്തുന്നു, എന്നാൽ ഇപ്പോൾ delayAndGetRandom(1000) ആവശ്യമില്ലാത്തതിനാൽ ഒന്നും തിരികെ നൽകുന്നില്ല.
• തൽഫലമായി, a + b * c ഫോർമുല ഉപയോഗിച്ച് മൂല്യങ്ങൾ കണക്കാക്കുന്നു. ഫലം Promise.resolve ഉപയോഗിച്ച് ഒരു വാഗ്ദാനത്തിൽ പൊതിഞ്ഞ് ഫംഗ്‌ഷൻ വഴി തിരികെ നൽകുന്നു.

ഈ വിരാമങ്ങൾ ES6-ലെ ജനറേറ്ററുകളെ അനുസ്മരിപ്പിക്കുന്നതായിരിക്കാം, പക്ഷേ അതിൽ ചിലതുണ്ട് നിങ്ങളുടെ കാരണങ്ങൾ.

പ്രശ്നം പരിഹരിക്കുന്നു

ശരി, ഇപ്പോൾ മുകളിൽ പറഞ്ഞ പ്രശ്നത്തിനുള്ള പരിഹാരം നോക്കാം.

queryDatabase, sendEmail, logTaskInFile എന്നിവയും മറ്റുള്ളവയും പോലുള്ള പ്രവർത്തനങ്ങളുടെ ഫലങ്ങൾക്കായി കാത്തിരിക്കാൻ ഫിനിഷ്മൈ ടാസ്ക് ഫംഗ്ഷൻ Await ഉപയോഗിക്കുന്നു. നിങ്ങൾ ഈ പരിഹാരത്തെ വാഗ്ദാനങ്ങൾ ഉപയോഗിച്ച ഒന്നുമായി താരതമ്യം ചെയ്താൽ, സമാനതകൾ വ്യക്തമാകും. എന്നിരുന്നാലും, Async/Await പതിപ്പ് എല്ലാ വാക്യഘടന സങ്കീർണ്ണതകളും വളരെ ലളിതമാക്കുന്നു. ഈ സാഹചര്യത്തിൽ, .then/.catch പോലെയുള്ള കോൾബാക്കുകളും ചങ്ങലകളും വലിയ സംഖ്യകളില്ല.

അക്കങ്ങളുടെ ഔട്ട്പുട്ട് ഉള്ള ഒരു പരിഹാരം ഇതാ, രണ്ട് ഓപ്ഷനുകൾ ഉണ്ട്.

const wait = (i, ms) => new Promise(resolve => setTimeout(() => resolve(i), ms));
 
// Implementation One (Using for-loop)
const printNumbers = () => new Promise((resolve) => {
  let pr = Promise.resolve(0);
  for (let i = 1; i <= 10; i += 1) {
    pr = pr.then((val) => {
      console.log(val);
      return wait(i, Math.random() * 1000);
    });
  }
  resolve(pr);
});
 
// Implementation Two (Using Recursion)
 
const printNumbersRecursive = () => {
  return Promise.resolve(0).then(function processNextPromise(i) {
 
    if (i === 10) {
      return undefined;
    }
 
    return wait(i, Math.random() * 1000).then((val) => {
      console.log(val);
      return processNextPromise(i + 1);
    });
  });
};

അസിൻക് ഫംഗ്‌ഷനുകൾ ഉപയോഗിച്ചുള്ള ഒരു പരിഹാരം ഇതാ.

async function printNumbersUsingAsync() {
  for (let i = 0; i < 10; i++) {
    await wait(i, Math.random() * 1000);
    console.log(i);
  }
}

പ്രോസസ്സ് ചെയ്യുന്നതിൽ പിശക്

കൈകാര്യം ചെയ്യാത്ത പിശകുകൾ നിരസിക്കപ്പെട്ട വാഗ്ദാനത്തിൽ പൊതിഞ്ഞിരിക്കുന്നു. എന്നിരുന്നാലും, അസിൻക് ഫംഗ്‌ഷനുകൾക്ക് പിശകുകൾ സമന്വയിപ്പിച്ച് കൈകാര്യം ചെയ്യാൻ try/catch ഉപയോഗിക്കാം.

async function canRejectOrReturn() {
  // wait one second
  await new Promise(res => setTimeout(res, 1000));
 
// Reject with ~50% probability
  if (Math.random() > 0.5) {
    throw new Error('Sorry, number too big.')
  }
 
return 'perfect number';
}

canRejectOrReturn() എന്നത് ഒന്നുകിൽ വിജയിക്കുന്ന ("തികഞ്ഞ സംഖ്യ") അല്ലെങ്കിൽ ഒരു പിശകിനാൽ പരാജയപ്പെടുന്ന ("ക്ഷമിക്കണം, സംഖ്യ വളരെ വലുതാണ്") ഒരു അസമന്വിത പ്രവർത്തനമാണ്.

async function foo() {
  try {
    await canRejectOrReturn();
  } catch (e) {
    return 'error caught';
  }
}

മുകളിലെ ഉദാഹരണം canRejectOrReturn എക്സിക്യൂട്ട് ചെയ്യുമെന്ന് പ്രതീക്ഷിക്കുന്നതിനാൽ, അതിന്റെ പരാജയം ക്യാച്ച് ബ്ലോക്കിന്റെ നിർവ്വഹണത്തിന് കാരണമാകും. തൽഫലമായി, ഫംഗ്‌ഷൻ ഫൂ നിർവചിക്കാതെ (ട്രൈ ബ്ലോക്കിൽ ഒന്നും തിരികെ ലഭിക്കാത്തപ്പോൾ) അല്ലെങ്കിൽ ഒരു പിശക് പിടിപെട്ട് അവസാനിക്കും. തൽഫലമായി, ഈ ഫംഗ്‌ഷൻ പരാജയപ്പെടില്ല, കാരണം try/catch ഫംഗ്ഷൻ foo തന്നെ കൈകാര്യം ചെയ്യും.

മറ്റൊരു ഉദാഹരണം ഇതാ:

async function foo() {
  try {
    return canRejectOrReturn();
  } catch (e) {
    return 'error caught';
  }
}

ഉദാഹരണത്തിൽ, canRejectOrReturn foo-ൽ നിന്ന് മടങ്ങിയെന്ന വസ്തുത ശ്രദ്ധിക്കേണ്ടതാണ്. ഈ സാഹചര്യത്തിൽ ഫൂ, ഒന്നുകിൽ ഒരു പൂർണ്ണമായ സംഖ്യയിൽ അവസാനിക്കുന്നു അല്ലെങ്കിൽ ഒരു പിശക് നൽകുന്നു ("ക്ഷമിക്കണം, നമ്പർ വളരെ വലുതാണ്"). ക്യാച്ച് ബ്ലോക്ക് ഒരിക്കലും എക്സിക്യൂട്ട് ചെയ്യില്ല.

canRejectOrReturn എന്നതിൽ നിന്ന് പാസ്സാക്കിയ വാഗ്ദാനം foo തിരികെ നൽകുന്നു എന്നതാണ് പ്രശ്നം. അതിനാൽ foo എന്നതിനുള്ള പരിഹാരം canRejectOrReturn എന്നതിനുള്ള പരിഹാരമായി മാറുന്നു. ഈ സാഹചര്യത്തിൽ, കോഡിൽ രണ്ട് വരികൾ മാത്രമേ ഉണ്ടാകൂ:

try {
    const promise = canRejectOrReturn();
    return promise;
}

നിങ്ങൾ കാത്തിരിക്കുന്നതും മടങ്ങുന്നതും ഒരുമിച്ച് ഉപയോഗിക്കുകയാണെങ്കിൽ സംഭവിക്കുന്നത് ഇതാ:

async function foo() {
  try {
    return await canRejectOrReturn();
  } catch (e) {
    return 'error caught';
  }
}

മുകളിലെ കോഡിൽ, ഒരു പെർഫെക്റ്റ് നമ്പറും ഒരു പിശകും പിടിപെട്ട് foo വിജയകരമായി പുറത്തുകടക്കും. ഇവിടെ നിരാകരണങ്ങൾ ഉണ്ടാകില്ല. പക്ഷേ, നിർവചിക്കാതെ, canRejectOrReturn ഉപയോഗിച്ച് foo മടങ്ങും. റിട്ടേൺ വെയ്റ്റ് canRejectOrReturn() ലൈൻ നീക്കം ചെയ്തുകൊണ്ട് നമുക്ക് ഇത് ഉറപ്പാക്കാം:

try {
    const value = await canRejectOrReturn();
    return value;
}
// …

സാധാരണ തെറ്റുകളും കുഴപ്പങ്ങളും

ചില സാഹചര്യങ്ങളിൽ, Async/Await ഉപയോഗിക്കുന്നത് പിശകുകളിലേക്ക് നയിച്ചേക്കാം.

മറന്ന കാത്തിരിപ്പ്

ഇത് പലപ്പോഴും സംഭവിക്കുന്നു - വാഗ്ദാനത്തിന് മുമ്പ് കാത്തിരിക്കുന്ന കീവേഡ് മറന്നു:

async function foo() {
  try {
    canRejectOrReturn();
  } catch (e) {
    return 'caught';
  }
}

നിങ്ങൾക്ക് കാണാനാകുന്നതുപോലെ, കോഡിൽ കാത്തിരിപ്പും തിരിച്ചുവരവും ഇല്ല. അതിനാൽ foo എല്ലായ്പ്പോഴും 1 സെക്കൻഡ് കാലതാമസം കൂടാതെ നിർവചിക്കാതെ പുറത്തുകടക്കുന്നു. എന്നാൽ വാഗ്ദാനം നിറവേറ്റപ്പെടും. ഇത് ഒരു പിശക് അല്ലെങ്കിൽ നിരസിക്കൽ എറിയുകയാണെങ്കിൽ, UnhandledPromiseRejectionWarning എന്ന് വിളിക്കപ്പെടും.

കോൾബാക്കുകളിൽ അസിൻക് പ്രവർത്തനങ്ങൾ

Async ഫംഗ്‌ഷനുകൾ .map അല്ലെങ്കിൽ .filter-ൽ കോൾബാക്കുകളായി ഉപയോഗിക്കാറുണ്ട്. GitHub-ലെ ഓപ്പൺ റിപ്പോസിറ്ററികളുടെ എണ്ണം നൽകുന്ന fetchPublicReposCount(ഉപയോക്തൃനാമം) ഫംഗ്‌ഷൻ ഒരു ഉദാഹരണമാണ്. മൂന്ന് ഉപയോക്താക്കൾ ഉണ്ടെന്ന് പറയട്ടെ, അവരുടെ അളവുകൾ നമുക്ക് ആവശ്യമാണ്. ഈ ടാസ്ക്കിനുള്ള കോഡ് ഇതാ:

const url = 'https://api.github.com/users';
 
// Utility fn to fetch repo counts
const fetchPublicReposCount = async (username) => {
  const response = await fetch(`${url}/${username}`);
  const json = await response.json();
  return json['public_repos'];
}

ഞങ്ങൾക്ക് ArfatSalman, octocat, norvig അക്കൗണ്ടുകൾ ആവശ്യമാണ്. ഈ സാഹചര്യത്തിൽ ഞങ്ങൾ ചെയ്യുന്നു:

const users = [
  'ArfatSalman',
  'octocat',
  'norvig'
];
 
const counts = users.map(async username => {
  const count = await fetchPublicReposCount(username);
  return count;
});

.മാപ്പ് കോൾബാക്കിൽ കാത്തിരിക്കുന്നത് ശ്രദ്ധിക്കേണ്ടതാണ്. ഇവിടെ കൗണ്ടുകൾ എന്നത് വാഗ്ദാനങ്ങളുടെ ഒരു നിരയാണ്, കൂടാതെ .map എന്നത് ഓരോ നിർദ്ദിഷ്ട ഉപയോക്താവിനുമുള്ള ഒരു അജ്ഞാത കോൾബാക്കാണ്.

കാത്തിരിപ്പിന്റെ അമിത സ്ഥിരതയുള്ള ഉപയോഗം

നമുക്ക് ഈ കോഡ് ഉദാഹരണമായി എടുക്കാം:

async function fetchAllCounts(users) {
  const counts = [];
  for (let i = 0; i < users.length; i++) {
    const username = users[i];
    const count = await fetchPublicReposCount(username);
    counts.push(count);
  }
  return counts;
}

ഇവിടെ റിപ്പോ നമ്പർ കൗണ്ട് വേരിയബിളിൽ സ്ഥാപിച്ചിരിക്കുന്നു, തുടർന്ന് ഈ നമ്പർ കൗണ്ട്സ് അറേയിലേക്ക് ചേർക്കുന്നു. സെർവറിൽ നിന്ന് ആദ്യ ഉപയോക്താവിന്റെ ഡാറ്റ എത്തുന്നത് വരെ, തുടർന്നുള്ള എല്ലാ ഉപയോക്താക്കളും സ്റ്റാൻഡ്‌ബൈ മോഡിൽ ആയിരിക്കും എന്നതാണ് കോഡിന്റെ പ്രശ്നം. അങ്ങനെ, ഒരു സമയം ഒരു ഉപയോക്താവ് മാത്രമേ പ്രോസസ്സ് ചെയ്യപ്പെടുകയുള്ളൂ.

ഉദാഹരണത്തിന്, ഒരു ഉപയോക്താവിനെ പ്രോസസ്സ് ചെയ്യുന്നതിന് ഏകദേശം 300 എംഎസ് എടുക്കുകയാണെങ്കിൽ, എല്ലാ ഉപയോക്താക്കൾക്കും ഇത് ഇതിനകം തന്നെ ഒരു സെക്കൻഡാണ്; രേഖീയമായി ചെലവഴിക്കുന്ന സമയം ഉപയോക്താക്കളുടെ എണ്ണത്തെ ആശ്രയിച്ചിരിക്കുന്നു. എന്നാൽ റിപ്പോയുടെ എണ്ണം ലഭിക്കുന്നത് പരസ്പരം ആശ്രയിക്കാത്തതിനാൽ, പ്രക്രിയകൾ സമാന്തരമാക്കാം. ഇതിന് .map, Promise.all എന്നിവയിൽ പ്രവർത്തിക്കേണ്ടതുണ്ട്:

async function fetchAllCounts(users) {
  const promises = users.map(async username => {
    const count = await fetchPublicReposCount(username);
    return count;
  });
  return Promise.all(promises);
}

Promise.all വാഗ്‌ദാനങ്ങളുടെ ഒരു നിര ഇൻപുട്ടായി സ്വീകരിക്കുകയും ഒരു വാഗ്‌ദാനം നൽകുകയും ചെയ്യുന്നു. രണ്ടാമത്തേത്, അറേയിലെ എല്ലാ വാഗ്ദാനങ്ങളും പൂർത്തിയാക്കിയ ശേഷം അല്ലെങ്കിൽ ആദ്യ നിരസിക്കൽ പൂർത്തിയായി. അവയെല്ലാം ഒരേ സമയം ആരംഭിക്കാത്തത് സംഭവിക്കാം - ഒരേസമയം ആരംഭിക്കുന്നത് ഉറപ്പാക്കാൻ, നിങ്ങൾക്ക് പി-മാപ്പ് ഉപയോഗിക്കാം.

തീരുമാനം

വികസനത്തിന് അസിൻക് ഫംഗ്‌ഷനുകൾ കൂടുതൽ പ്രാധാന്യമർഹിക്കുന്നു. ശരി, അസിൻക് ഫംഗ്‌ഷനുകളുടെ അഡാപ്റ്റീവ് ഉപയോഗത്തിന്, നിങ്ങൾ ഉപയോഗിക്കണം അസിൻക് ഇറ്ററേറ്ററുകൾ. ഒരു ജാവാസ്ക്രിപ്റ്റ് ഡെവലപ്പർ ഇതിൽ നന്നായി അറിഞ്ഞിരിക്കണം.

സ്കിൽബോക്സ് ശുപാർശ ചെയ്യുന്നു:

• പ്രായോഗിക കോഴ്സ് "മൊബൈൽ ഡെവലപ്പർ PRO".
• ഓൺലൈൻ കോഴ്സിന് അപേക്ഷിച്ചു "പൈത്തണിലെ ഡാറ്റാ അനലിസ്റ്റ്".
• രണ്ടുവർഷത്തെ പ്രാക്ടിക്കൽ കോഴ്സ് "ഞാൻ ഒരു വെബ് ഡെവലപ്പർ PRO ആണ്".

അവലംബം: www.habr.com