उदाहरणहरू प्रयोग गरेर JavaScript मा Async/Await हेरौं

लेखका लेखकले JavaScript मा Async/Await को उदाहरणहरू जाँच्छन्। समग्रमा, Async/Await एसिन्क्रोनस कोड लेख्नको लागि एक सुविधाजनक तरिका हो। यो सुविधा देखा पर्नु अघि, यस्तो कोड कलब्याक र वाचा प्रयोग गरेर लेखिएको थियो। मूल लेखको लेखकले विभिन्न उदाहरणहरूको विश्लेषण गरेर Async/Await को फाइदाहरू प्रकट गर्दछ।

हामी सम्झाउँछौं: सबै Habr पाठकहरूका लागि - Habr प्रोमो कोड प्रयोग गरी कुनै पनि Skillbox पाठ्यक्रममा भर्ना गर्दा १०,००० रूबल छुट।

Skillbox सिफारिस गर्दछ: शैक्षिक अनलाइन पाठ्यक्रम "जाभा विकासकर्ता".

कलब्याक

कलब्याक एउटा प्रकार्य हो जसको कल अनिश्चित काल ढिलो हुन्छ। पहिले, कलब्याकहरू कोडका ती क्षेत्रहरूमा प्रयोग गरिन्थ्यो जहाँ परिणाम तुरुन्तै प्राप्त गर्न सकिँदैन।

यहाँ 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 सेकेन्डको लागि fn प्रकार्य रोक्छ।
• delayAndGetRandom(1000) via resolution ले अनियमित मान फर्काउँछ, जुन त्यसपछि चर b मा तोकिएको छ।
• खैर, चल c को मामला चर ए को मामला जस्तै छ। त्यस पछि, सबै एक सेकेन्डको लागि रोकिन्छ, तर अब 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 कलब्याकमा पर्खाइमा ध्यान दिन लायक छ। यहाँ गणनाहरू प्रतिज्ञाहरूको एर्रे हो, र नक्सा प्रत्येक निर्दिष्ट प्रयोगकर्ताको लागि एक बेनामी कलब्याक हो।

प्रतीक्षा को अत्यधिक लगातार प्रयोग

यो कोडलाई उदाहरणको रूपमा लिनुहोस्:

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। एक जाभास्क्रिप्ट विकासकर्ता यसमा राम्रोसँग निपुण हुनुपर्छ।

Skillbox सिफारिस गर्दछ:

• व्यावहारिक पाठ्यक्रम "मोबाइल विकासकर्ता प्रो".
• अनलाइन पाठ्यक्रम लागू गरियो "पाइथनमा डाटा विश्लेषक".
• दुई वर्षे व्यावहारिक पाठ्यक्रम "म एक वेब विकासकर्ता प्रो हुँ".

स्रोत: www.habr.com