आइए उदाहरणों का उपयोग करके जावास्क्रिप्ट में Async/Await को देखें

लेख के लेखक जावास्क्रिप्ट में Async/Await के उदाहरणों की जांच करते हैं। कुल मिलाकर, Async/Await एसिंक्रोनस कोड लिखने का एक सुविधाजनक तरीका है। इस सुविधा के प्रकट होने से पहले, ऐसा कोड कॉलबैक और वादों का उपयोग करके लिखा गया था। मूल लेख के लेखक ने विभिन्न उदाहरणों का विश्लेषण करके Async/Await के फायदों का खुलासा किया है।

अनुस्मारक: "हैबर" के सभी पाठकों के लिए - "हैबर" प्रचार कोड का उपयोग करके किसी भी स्किलबॉक्स पाठ्यक्रम में नामांकन करते समय 10 रूबल की छूट।

स्किलबॉक्स अनुशंसा करता है: शैक्षिक ऑनलाइन पाठ्यक्रम "जावा डेवलपर".

कॉलबैक

कॉलबैक एक फ़ंक्शन है जिसकी कॉल अनिश्चित काल तक विलंबित होती है। पहले, कॉलबैक का उपयोग कोड के उन क्षेत्रों में किया जाता था जहां परिणाम तुरंत प्राप्त नहीं किया जा सकता था।

यहां Node.js में किसी फ़ाइल को अतुल्यकालिक रूप से पढ़ने का एक उदाहरण दिया गया है:

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

समस्याएँ तब उत्पन्न होती हैं जब आपको एक साथ कई अतुल्यकालिक संचालन करने की आवश्यकता होती है। आइए इस परिदृश्य की कल्पना करें: अरफ़ात उपयोगकर्ता डेटाबेस के लिए एक अनुरोध किया गया है, आपको इसके प्रोफ़ाइल_img_url फ़ील्ड को पढ़ने और someserver.com सर्वर से एक छवि डाउनलोड करने की आवश्यकता है।
डाउनलोड करने के बाद, हम छवि को दूसरे प्रारूप में परिवर्तित करते हैं, उदाहरण के लिए पीएनजी से जेपीईजी में। यदि रूपांतरण सफल रहा, तो उपयोगकर्ता के ईमेल पर एक पत्र भेजा जाता है। इसके बाद, इवेंट के बारे में जानकारी ट्रांसफ़ॉर्मेशन.लॉग फ़ाइल में दर्ज की जाती है, जिसमें तारीख का संकेत दिया जाता है।

कोड के अंतिम भाग में कॉलबैक के ओवरलैप और बड़ी संख्या }) पर ध्यान देना उचित है। इसे कॉलबैक नर्क या कयामत का पिरामिड कहा जाता है।

इस पद्धति के नुकसान स्पष्ट हैं:

• इस कोड को पढ़ना कठिन है.
• त्रुटियों को संभालना भी मुश्किल है, जिसके कारण अक्सर कोड की गुणवत्ता खराब हो जाती है।

इस समस्या को हल करने के लिए जावास्क्रिप्ट में वादे जोड़े गए। वे आपको कॉलबैक की डीप नेस्टिंग को .then शब्द से बदलने की अनुमति देते हैं।

वादों का सकारात्मक पहलू यह है कि वे कोड को बाएं से दाएं के बजाय ऊपर से नीचे तक बेहतर पढ़ने योग्य बनाते हैं। हालाँकि, वादों की भी अपनी समस्याएँ हैं:

• आपको बहुत कुछ जोड़ने की जरूरत है।
• सभी त्रुटियों को संभालने के लिए प्रयास/पकड़ने के बजाय .catch का उपयोग किया जाता है।
• एक लूप के भीतर कई वादों के साथ काम करना हमेशा सुविधाजनक नहीं होता है; कुछ मामलों में, वे कोड को जटिल बनाते हैं।

यहां एक समस्या है जो अंतिम बिंदु का अर्थ बताएगी।

मान लीजिए कि हमारे पास एक लूप है जो यादृच्छिक अंतराल (0-एन सेकंड) पर 10 से 0 तक संख्याओं का अनुक्रम प्रिंट करता है। वादों का उपयोग करते हुए, आपको इस लूप को बदलने की आवश्यकता है ताकि संख्याएं 0 से 10 तक अनुक्रम में मुद्रित हो जाएं। इसलिए, यदि शून्य को प्रिंट करने में 6 सेकंड लगते हैं और एक को प्रिंट करने में 2 सेकंड लगते हैं, तो शून्य को पहले प्रिंट किया जाना चाहिए, और फिर जिसे छापने की उलटी गिनती शुरू हो जाएगी।

और निश्चित रूप से, हम इस समस्या को हल करने के लिए Async/Await या .sort का उपयोग नहीं करते हैं। एक उदाहरण समाधान अंत में है.

एसिंक फ़ंक्शन

ES2017 (ES8) में async फ़ंक्शंस को जोड़ने से वादों के साथ काम करने का कार्य सरल हो गया। मैं ध्यान देता हूं कि एसिंक फ़ंक्शंस वादों के "शीर्ष पर" काम करते हैं। ये फ़ंक्शन गुणात्मक रूप से भिन्न अवधारणाओं का प्रतिनिधित्व नहीं करते हैं। Async फ़ंक्शंस का उद्देश्य उस कोड के विकल्प के रूप में है जो वादों का उपयोग करता है।

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

नायब! यह याद रखने योग्य है कि क्लास कंस्ट्रक्टर और गेटर्स/सेटर्स एसिंक्रोनस नहीं हो सकते।

शब्दार्थ और निष्पादन नियम

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

इस मामले में, वादा "मैन्युअल रूप से" वापस कर दिया जाता है। एक एसिंक्रोनस फ़ंक्शन हमेशा एक नए वादे में लपेटा जाता है।

यदि रिटर्न मान एक आदिम है, तो एसिंक फ़ंक्शन मान को एक वादे में लपेटकर लौटाता है। यदि रिटर्न वैल्यू एक वादा वस्तु है, तो इसका रिज़ॉल्यूशन एक नए वादे में लौटाया जाता है।

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);

और यहां इसका विवरण दिया गया है कि एफएन फ़ंक्शन कैसे काम करता है।

• इसे कॉल करने के बाद, पहली पंक्ति const a = wait 9 से परिवर्तित हो जाती है; स्थिरांक में = प्रतीक्षा करें Promise.resolve(9);
• प्रतीक्षा का उपयोग करने के बाद, फ़ंक्शन निष्पादन को तब तक निलंबित कर दिया जाता है जब तक कि उसे अपना मान नहीं मिल जाता (वर्तमान स्थिति में यह 9 है)।
• DelayAndGetRandom(1000) fn फ़ंक्शन के निष्पादन को तब तक रोक देता है जब तक कि यह स्वयं पूरा न हो जाए (1 सेकंड के बाद)। यह प्रभावी रूप से fn फ़ंक्शन को 1 सेकंड के लिए रोक देता है।
• डिलेएंडगेटरैंडम(1000) रिज़ॉल्यूशन के माध्यम से एक यादृच्छिक मान लौटाता है, जिसे बाद में वेरिएबल बी को सौंपा जाता है।
• खैर, वेरिएबल सी का मामला वेरिएबल ए के मामले के समान है। उसके बाद, सब कुछ एक सेकंड के लिए रुक जाता है, लेकिन अब देरीएंडगेटरैंडम(1000) कुछ भी नहीं लौटाता क्योंकि इसकी आवश्यकता नहीं है।
• परिणामस्वरूप, मानों की गणना सूत्र a + b * c का उपयोग करके की जाती है। परिणाम को Promise.resolve का उपयोग करके एक वादे में लपेटा जाता है और फ़ंक्शन द्वारा लौटाया जाता है।

ये रुकावटें ES6 में जनरेटर की याद दिला सकती हैं, लेकिन इसमें कुछ बात है आपके कारण.

समस्या का समाधान

खैर, अब ऊपर बताई गई समस्या के समाधान पर नजर डालते हैं।

फिनिशमायटास्क फ़ंक्शन क्वेरीडेटाबेस, सेंडईमेल, लॉगटास्कइनफाइल और अन्य जैसे संचालन के परिणामों की प्रतीक्षा करने के लिए प्रतीक्षा का उपयोग करता है। यदि आप इस समाधान की तुलना उस समाधान से करें जहां वादों का उपयोग किया गया था, तो समानताएं स्पष्ट हो जाएंगी। हालाँकि, 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 फ़ंक्शंस समकालिक रूप से त्रुटियों को संभालने के लिए प्रयास/पकड़ का उपयोग कर सकते हैं।

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 के साथ वापस आएगा, अपरिभाषित के साथ नहीं। आइए रिटर्न वेट canRejectOrReturn() लाइन को हटाकर इसे सुनिश्चित करें:

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

सामान्य गलतियाँ और नुकसान

कुछ मामलों में, Async/Await का उपयोग करने से त्रुटियाँ हो सकती हैं।

इंतज़ार भूल गया

ऐसा अक्सर होता है - वादे से पहले प्रतीक्षा कीवर्ड को भुला दिया जाता है:

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

जैसा कि आप देख सकते हैं, कोड में कोई wait या return नहीं है। इसलिए 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 कॉलबैक में प्रतीक्षा पर ध्यान देना उचित है। यहां काउंट्स वादों की एक श्रृंखला है, और .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 इनपुट के रूप में वादों की एक श्रृंखला प्राप्त करता है और एक वादा लौटाता है। उत्तरार्द्ध, सरणी में सभी वादे पूरे होने के बाद या पहली अस्वीकृति पर, पूरा हो गया है। ऐसा हो सकता है कि वे सभी एक ही समय पर प्रारंभ न हों - एक साथ प्रारंभ सुनिश्चित करने के लिए, आप पी-मैप का उपयोग कर सकते हैं।

निष्कर्ष

विकास के लिए Async फ़ंक्शंस तेजी से महत्वपूर्ण होते जा रहे हैं। खैर, एसिंक फ़ंक्शंस के अनुकूली उपयोग के लिए इसका उपयोग करना उचित है एसिंक इटरेटर्स. एक जावास्क्रिप्ट डेवलपर को इसमें अच्छी तरह से पारंगत होना चाहिए।

स्किलबॉक्स अनुशंसा करता है:

• व्यावहारिक पाठ्यक्रम "मोबाइल डेवलपर प्रो".
• ऑनलाइन पाठ्यक्रम लागू किया "पायथन में डेटा विश्लेषक".
• दो वर्षीय व्यावहारिक पाठ्यक्रम "मैं एक PRO वेब डेवलपर हूं".

स्रोत: www.habr.com