उदाहरणे वापरून 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 मधून रूपांतरित केली जाते; const a = प्रतीक्षा करा Promise.resolve(9);
• Await वापरल्यानंतर, त्याचे मूल्य प्राप्त होईपर्यंत फंक्शनची अंमलबजावणी निलंबित केली जाते (सध्याच्या परिस्थितीत ते 9 आहे).
• delayAndGetRandom(1000) fn फंक्शन पूर्ण होईपर्यंत (1 सेकंदानंतर) त्याच्या अंमलबजावणीला विराम देतो. हे प्रभावीपणे 1 सेकंदासाठी fn फंक्शन थांबवते.
• delayAndGetRandom(1000) द्वारे निराकरण एक यादृच्छिक मूल्य देते, जे नंतर व्हेरिएबल b ला नियुक्त केले जाते.
• बरं, व्हेरिएबल c ची केस व्हेरिएबल a सारखीच आहे. त्यानंतर, सर्वकाही एका सेकंदासाठी थांबते, परंतु आता delayAndGetRandom(1000) काहीही परत करत नाही कारण त्याची आवश्यकता नाही.
• परिणामी, मूल्यांची गणना a + b * c सूत्र वापरून केली जाते. परिणाम Promise.resolve वापरून वचनामध्ये गुंडाळला जातो आणि फंक्शनद्वारे परत केला जातो.

हे विराम ES6 मधील जनरेटरची आठवण करून देणारे असू शकतात, परंतु त्यात काहीतरी आहे तुमची कारणे.

समस्या सोडवणे

बरं, आता वर नमूद केलेल्या समस्येचे निराकरण पाहू.

FinishMyTask फंक्शन queryDatabase, sendEmail, logTaskInFile आणि इतर सारख्या ऑपरेशन्सच्या परिणामांची प्रतीक्षा करण्यासाठी प्रतीक्षा वापरते. तुम्ही या सोल्यूशनची तुलना ज्या ठिकाणी वचने वापरली होती त्याच्याशी केल्यास, समानता स्पष्ट होईल. तथापि, 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 सह परत येईल, undefined सह नाही. रिटर्न await canRejectOrReturn() ओळ काढून याची खात्री करूया:

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

सामान्य चुका आणि तोटे

काही प्रकरणांमध्ये, Async/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'];
}

आम्हाला ArfatSalman, octocat, norvig खाती हवी आहेत. या प्रकरणात आम्ही करतो:

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 ms लागतात, तर सर्व वापरकर्त्यांसाठी ते आधीपासूनच एक सेकंद आहे; वापरकर्त्यांच्या संख्येवर रेखीयपणे घालवलेला वेळ अवलंबून असतो. परंतु रेपोची संख्या मिळवणे एकमेकांवर अवलंबून नसल्यामुळे, प्रक्रिया समांतर होऊ शकतात. यासाठी .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