ચાલો ઉદાહરણોનો ઉપયોગ કરીને 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 માં વચનો ઉમેરવામાં આવ્યા હતા. તેઓ તમને કૉલબૅક્સના ઊંડા માળખાને શબ્દ સાથે બદલવાની મંજૂરી આપે છે. પછી.

વચનોનું સકારાત્મક પાસું એ છે કે તેઓ કોડને ડાબેથી જમણે કરવાને બદલે ઉપરથી નીચે સુધી વધુ સારી રીતે વાંચવા યોગ્ય બનાવે છે. જો કે, વચનોની પણ તેમની સમસ્યાઓ છે:

• તમારે ઘણું ઉમેરવાની જરૂર છે. પછી.
• ટ્રાય/કેચને બદલે, બધી ભૂલોને હેન્ડલ કરવા માટે .catch નો ઉપયોગ થાય છે.
• એક લૂપમાં બહુવિધ વચનો સાથે કામ કરવું હંમેશા અનુકૂળ હોતું નથી; કેટલાક કિસ્સાઓમાં, તેઓ કોડને જટિલ બનાવે છે.

અહીં એક સમસ્યા છે જે છેલ્લા મુદ્દાનો અર્થ બતાવશે.

ધારો કે આપણી પાસે લૂપ માટે છે જે રેન્ડમ અંતરાલો (0–n સેકંડ) પર 10 થી 0 સુધીની સંખ્યાઓનો ક્રમ છાપે છે. વચનોનો ઉપયોગ કરીને, તમારે આ લૂપ બદલવાની જરૂર છે જેથી કરીને નંબરો 0 થી 10 સુધીના ક્રમમાં છાપવામાં આવે. તેથી, જો શૂન્ય છાપવામાં 6 સેકન્ડ અને એક છાપવામાં 2 સેકન્ડનો સમય લાગે, તો શૂન્ય પ્રથમ પ્રિન્ટ થવો જોઈએ, અને પછી એક છાપવા માટેનું કાઉન્ટડાઉન શરૂ થશે.

અને અલબત્ત, અમે આ સમસ્યાને ઉકેલવા માટે Async/Await અથવા .sort નો ઉપયોગ કરતા નથી. એક ઉદાહરણ ઉકેલ અંતે છે.

Async કાર્યો

ES2017 (ES8) માં async કાર્યોના ઉમેરાથી વચનો સાથે કામ કરવાનું કાર્ય સરળ બન્યું છે. હું નોંધું છું કે async કાર્યો વચનોની "ટોચ પર" કામ કરે છે. આ કાર્યો ગુણાત્મક રીતે અલગ ખ્યાલોનું પ્રતિનિધિત્વ કરતા નથી. Async ફંક્શનનો હેતુ કોડના વિકલ્પ તરીકે છે જે વચનોનો ઉપયોગ કરે છે.

Async/Await એ સિંક્રનસ શૈલીમાં અસુમેળ કોડ સાથે કાર્ય ગોઠવવાનું શક્ય બનાવે છે.

આમ, વચનો જાણવાથી 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 કાર્યો હંમેશા વચનો આપે છે:

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

ખાસ કરીને, fn શબ્દમાળા હેલો પરત કરે છે. ઠીક છે, કારણ કે આ એક અસુમેળ કાર્ય છે, સ્ટ્રિંગ મૂલ્ય કન્સ્ટ્રક્ટરનો ઉપયોગ કરીને વચનમાં આવરિત છે.

અહીં Async વિના વૈકલ્પિક ડિઝાઇન છે:

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

આ કિસ્સામાં, વચન "મેન્યુઅલી" પરત કરવામાં આવે છે. અસુમેળ કાર્ય હંમેશા નવા વચનમાં આવરિત હોય છે.

જો વળતર મૂલ્ય એક આદિમ છે, તો async ફંક્શન તેને વચનમાં લપેટીને મૂલ્ય પરત કરે છે. જો રિટર્ન વેલ્યુ એ પ્રોમિસ ઑબ્જેક્ટ હોય, તો તેનું રિઝોલ્યુશન નવા વચનમાં પરત કરવામાં આવે છે.

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 ફંક્શન્સ હંમેશા વચનનું આઉટપુટ કરે છે, પછી ભલેને શું પરત કરવામાં આવે.

અસુમેળ કાર્યો દરેક રાહ પર વિરામ લે છે.

રાહ અભિવ્યક્તિઓ પર અસર કરે છે. તેથી, જો અભિવ્યક્તિ વચન છે, તો વચન પૂરું ન થાય ત્યાં સુધી 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 = await 9 માંથી રૂપાંતરિત થાય છે; in const a = રાહ જુઓ Promise.resolve(9);
• Await નો ઉપયોગ કર્યા પછી, ફંક્શન એક્ઝેક્યુશનને તેની કિંમત ન મળે ત્યાં સુધી સસ્પેન્ડ કરવામાં આવે છે (વર્તમાન પરિસ્થિતિમાં તે 9 છે).
• delayAndGetRandom(1000) fn ફંક્શનના એક્ઝેક્યુશનને ત્યાં સુધી થોભાવે છે જ્યાં સુધી તે પૂર્ણ ન થાય (1 સેકન્ડ પછી). આ અસરકારક રીતે 1 સેકન્ડ માટે fn ફંક્શનને રોકે છે.
• રિઝોલ્યુશન દ્વારા delayAndGetRandom(1000) રેન્ડમ મૂલ્ય આપે છે, જે પછી ચલ b ને સોંપવામાં આવે છે.
• ઠીક છે, ચલ c સાથેનો કેસ ચલ a સાથેના કેસ જેવો જ છે. તે પછી, બધું એક સેકન્ડ માટે અટકી જાય છે, પરંતુ હવે વિલંબ એંડગેટરેન્ડમ(1000) કંઈપણ પાછું આપતું નથી કારણ કે તે જરૂરી નથી.
• પરિણામે, મૂલ્યોની ગણતરી ફોર્મ્યુલા a + b * c નો ઉપયોગ કરીને કરવામાં આવે છે. પરિણામ Promise.resolve નો ઉપયોગ કરીને વચનમાં આવરિત છે અને ફંક્શન દ્વારા પરત કરવામાં આવે છે.

આ વિરામ ES6 માં જનરેટરની યાદ અપાવે છે, પરંતુ તેમાં કંઈક છે તમારા કારણો.

સમસ્યાનું નિરાકરણ

વેલ, હવે આપણે ઉપર જણાવેલ સમસ્યાનો ઉકેલ જોઈએ.

FinishMyTask ફંક્શન 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 વિધેયોનો ઉપયોગ કરીને ઉકેલ છે.

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

પ્રક્રિયામાં ભૂલ

અસંબંધિત ભૂલોને નકારવામાં આવેલા વચનમાં લપેટવામાં આવે છે. જો કે, એસિંક ફંક્શન્સ સિંક્રનસ રીતે ભૂલોને હેન્ડલ કરવા માટે ટ્રાય/કેચનો ઉપયોગ કરી શકે છે.

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 ને એક્ઝિક્યુટ કરવાની અપેક્ષા રાખે છે, તેની પોતાની નિષ્ફળતા કેચ બ્લોકના અમલમાં પરિણમશે. પરિણામે, ફંક્શન foo ક્યાં તો અવ્યાખ્યાયિત સાથે સમાપ્ત થશે (જ્યારે ટ્રાય બ્લોકમાં કંઈ પાછું મળતું નથી) અથવા કેચ થયેલી ભૂલ સાથે. પરિણામે, આ ફંક્શન નિષ્ફળ જશે નહીં કારણ કે ટ્રાય/કેચ ફંક્શન foo ને જ હેન્ડલ કરશે.

અહીં બીજું ઉદાહરણ છે:

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

તે હકીકત પર ધ્યાન આપવું યોગ્ય છે કે ઉદાહરણમાં, canRejectOrReturn foo થી પરત કરવામાં આવે છે. આ કિસ્સામાં ફૂ કાં તો સંપૂર્ણ સંખ્યા સાથે સમાપ્ત થાય છે અથવા ભૂલ પરત કરે છે ("માફ કરશો, સંખ્યા ખૂબ મોટી"). કેચ બ્લોક ક્યારેય ચલાવવામાં આવશે નહીં.

સમસ્યા એ છે કે foo canRejectOrReturn માંથી પસાર કરેલ વચન પરત કરે છે. તેથી foo નો ઉકેલ canRejectOrReturn નો ઉકેલ બની જાય છે. આ કિસ્સામાં, કોડમાં ફક્ત બે લીટીઓ હશે:

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

જો તમે રાહ જુઓ અને પાછા ફરો તો શું થાય છે તે અહીં છે:

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

ઉપરોક્ત કોડમાં, foo એક સંપૂર્ણ સંખ્યા અને પકડાયેલી ભૂલ બંને સાથે સફળતાપૂર્વક બહાર નીકળી જશે. અહીં કોઈ ઇનકાર થશે નહીં. પરંતુ foo canRejectOrReturn સાથે પરત આવશે, undefined સાથે નહીં. ચાલો રીટર્ન await canRejectOrReturn() લાઇનને દૂર કરીને તેની ખાતરી કરીએ:

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

સામાન્ય ભૂલો અને મુશ્કેલીઓ

કેટલાક કિસ્સાઓમાં, Async/Await નો ઉપયોગ કરવાથી ભૂલો થઈ શકે છે.

રાહ ભૂલી ગયા

આ ઘણી વાર થાય છે - await કીવર્ડ વચન પહેલાં ભૂલી જાય છે:

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

જેમ તમે જોઈ શકો છો, કોડમાં કોઈ રાહ કે વળતર નથી. તેથી foo હંમેશા 1 સેકન્ડના વિલંબ વિના અવ્યાખ્યાયિત સાથે બહાર નીકળે છે. પરંતુ વચન પૂર્ણ થશે. જો તે ભૂલ અથવા અસ્વીકાર ફેંકે છે, તો UnhandledPromiseRejectionWarning કહેવામાં આવશે.

કૉલબૅક્સમાં Async કાર્યો

Async ફંક્શન્સ ઘણી વાર .map અથવા .filter માં કૉલબેક્સ તરીકે ઉપયોગમાં લેવાય છે. ઉદાહરણ fetchPublicReposCount(username) ફંક્શન છે, જે GitHub પર ઓપન રિપોઝીટરીઝની સંખ્યા પરત કરે છે. ચાલો કહીએ કે ત્યાં ત્રણ વપરાશકર્તાઓ છે જેમના મેટ્રિક્સની અમને જરૂર છે. આ કાર્ય માટેનો કોડ અહીં છે:

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'];
}

અમને અરફત સલમાન, ઓક્ટોકેટ, નોર્વિગ એકાઉન્ટ્સની જરૂર છે. આ કિસ્સામાં અમે કરીએ છીએ:

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 ઇનપુટ તરીકે વચનોની શ્રેણી મેળવે છે અને વચન પરત કરે છે. બાદમાં, એરેમાંના બધા વચનો પૂર્ણ થયા પછી અથવા પ્રથમ અસ્વીકાર સમયે, પૂર્ણ થાય છે. એવું બની શકે છે કે તે બધા એક જ સમયે શરૂ થતા નથી - એક સાથે શરૂઆતની ખાતરી કરવા માટે, તમે p-map નો ઉપયોગ કરી શકો છો.

નિષ્કર્ષ

Async કાર્યો વિકાસ માટે વધુને વધુ મહત્વપૂર્ણ બની રહ્યા છે. ઠીક છે, async કાર્યોના અનુકૂલનશીલ ઉપયોગ માટે, તમારે ઉપયોગ કરવો જોઈએ Async Iterators. જાવાસ્ક્રિપ્ટ ડેવલપર આમાં સારી રીતે વાકેફ હોવા જોઈએ.

સ્કિલબોક્સ ભલામણ કરે છે:

• પ્રેક્ટિકલ કોર્સ "મોબાઇલ ડેવલપર પ્રો".
• ઓનલાઈન કોર્સ લાગુ કર્યો "પાયથોનમાં ડેટા વિશ્લેષક".
• બે વર્ષનો પ્રેક્ટિકલ કોર્સ "હું વેબ ડેવલપર પ્રો છું".

સોર્સ: www.habr.com