နမူနာများကို အသုံးပြု၍ JavaScript တွင် Async/Await ကို ကြည့်ကြပါစို့

ဆောင်းပါးရေးသားသူသည် JavaScript တွင် Async/Await ၏ နမူနာများကို ဆန်းစစ်သည်။ ယေဘုယျအားဖြင့်၊ Async/Await သည် asynchronous code ရေးရန် အဆင်ပြေသောနည်းလမ်းဖြစ်သည်။ ဤအင်္ဂါရပ်မပေါ်မီတွင်၊ ပြန်လည်ခေါ်ဆိုမှုများနှင့် ကတိများကို အသုံးပြု၍ ထိုကုဒ်ကို ရေးသားခဲ့သည်။ မူရင်းဆောင်းပါးကိုရေးသားသူသည် ဥပမာအမျိုးမျိုးကိုခွဲခြမ်းစိတ်ဖြာခြင်းဖြင့် Async/Await ၏အားသာချက်များကိုဖော်ပြသည်။

ငါတို့မင်းကိုသတိပေးတယ် "Habr" ၏စာဖတ်သူအားလုံးအတွက် - "Habr" ပရိုမိုးရှင်းကုဒ်ကို အသုံးပြု၍ မည်သည့် Skillbox သင်တန်းတွင်စာရင်းသွင်းသည့်အခါ 10 ရူဘယ်လျှော့စျေး။

Skillbox မှ အကြံပြုထားသည်- ပညာရေးအွန်လိုင်းသင်တန်း "Java Developer".

ပြန်ခေါ်

Callback သည် အချိန်အကန့်အသတ်မရှိ နှောင့်နှေးနေသည့် လုပ်ဆောင်ချက်တစ်ခုဖြစ်သည်။ ယခင်က၊ ရလဒ်ချက်ချင်းမရနိုင်သည့် ထိုနေရာများတွင် ဖုန်းခေါ်ဆိုမှုများကို အသုံးပြုခဲ့သည်။

ဤသည်မှာ 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 ဖိုင်ထဲသို့ အဖြစ်အပျက်နှင့်ပတ်သက်သည့် အချက်အလက်ကို ထည့်သွင်းပါသည်။

ကုဒ်၏နောက်ဆုံးအပိုင်းတွင် ပြန်လည်ခေါ်ဆိုမှုများ၏ ထပ်နေမှုနှင့် အရေအတွက်အများအပြားကို အာရုံစိုက်ရန် ထိုက်တန်ပါသည်။ Callback Hell သို့မဟုတ် Pyramid of Doom ဟုခေါ်သည်။

ဤနည်းလမ်း၏ အားနည်းချက်များမှာ သိသာထင်ရှားပါသည်။

• ဒီကုဒ်က ဖတ်ရခက်တယ်။
• ကုဒ်အရည်အသွေး ညံ့ဖျင်းစေတတ်သည့် အမှားများကို ကိုင်တွယ်ရန်လည်း ခက်ခဲသည်။

ဤပြဿနာကိုဖြေရှင်းရန် ကတိများကို JavaScript တွင် ထည့်သွင်းခဲ့သည်။ ၎င်းတို့သည် သင့်အား ပြန်ခေါ်ခြင်း၏ နက်နဲသော အသိုက်များကို . ထို့နောက် စကားလုံးဖြင့် အစားထိုးနိုင်စေပါသည်။

ကတိပြုချက်များ၏ အပြုသဘောဆောင်သည့် ရှုထောင့်မှာ ၎င်းတို့သည် ဘယ်မှညာမှ ညာဘက်ထက် အပေါ်မှအောက်ခြေအထိ ကုဒ်ကို ပိုမိုဖတ်ရှုနိုင်စေရန် ဖန်တီးပေးခြင်းဖြစ်သည်။ သို့ရာတွင်၊ ကတိများမှာလည်း ပြဿနာများရှိသည်။

• အများကြီးထည့်ရမယ်။
• try/catch အစား .catch ကို အမှားအယွင်းအားလုံးကို ကိုင်တွယ်ဖြေရှင်းရန် အသုံးပြုပါသည်။
• စက်ဝိုင်းတစ်ခုအတွင်း ကတိများစွာဖြင့် လုပ်ဆောင်ခြင်းသည် အမြဲတမ်း အဆင်ပြေမည်မဟုတ်ပါ၊ အချို့ကိစ္စများတွင်၊ ၎င်းတို့သည် ကုဒ်ကို ရှုပ်ထွေးစေသည်။

ဤသည်မှာ နောက်ဆုံးအချက်၏ အဓိပ္ပါယ်ကို ဖော်ပြမည့် ပြဿနာတစ်ခုဖြစ်သည်။

ကျပန်းကြားကာလများ (0–n စက္ကန့်) တွင် နံပါတ်များကို 10 မှ 0 အထိ print ထုတ်သည့် for loop တစ်ခုရှိသည်ဆိုပါစို့။ ကတိများကိုအသုံးပြု၍ ဂဏန်းများကို 0 မှ 10 အထိ ဆက်တိုက်ရိုက်နှိပ်နိုင်ရန် ဤကွင်းပတ်ကို ပြောင်းလဲရန် လိုအပ်ပါသည်။ ထို့ကြောင့် သုညတစ်ခုအား ပရင့်ထုတ်ရန် 6 စက္ကန့်နှင့် 2 စက္ကန့်ကြာပါက သုညကို ဦးစွာရိုက်နှိပ်သင့်ပြီး၊ ထို့နောက် ပုံနှိပ်ခြင်းအတွက် နှစ်သစ်ကြိုဆိုပွဲ စတင်ပါမည်။

ဤပြဿနာကိုဖြေရှင်းရန် ကျွန်ုပ်တို့သည် Async/Await သို့မဟုတ် .sort ကို အသုံးမပြုပါ။ ဥပမာတစ်ခုရဲ့ အဖြေက အဆုံးမှာ။

Async လုပ်ဆောင်ချက်များ

ES2017 (ES8) တွင် async လုပ်ဆောင်ချက်များကို ပေါင်းထည့်ခြင်းသည် ကတိများနှင့် လုပ်ဆောင်ခြင်း၏ လုပ်ငန်းတာဝန်ကို ရိုးရှင်းစေသည်။ async လုပ်ဆောင်ချက်များသည် ကတိတော်များ၏ “ထိပ်တွင်” အလုပ်လုပ်ကြောင်း ကျွန်ုပ်သတိပြုမိပါသည်။ ဤလုပ်ဆောင်ချက်များသည် အရည်အသွေးအရ ကွဲပြားသော သဘောတရားများကို ကိုယ်စားမပြုပါ။ Async လုပ်ဆောင်ချက်များသည် ကုဒ်များကို ကုဒ်များအတွက် အစားထိုးတစ်ခုအဖြစ် ရည်ရွယ်ပါသည်။

Async/Await သည် synchronous စတိုင်ဖြင့် ချိန်ကိုက်သည့် ကုဒ်ဖြင့် အလုပ်များကို စုစည်းနိုင်စေသည်။

ထို့ကြောင့် ကတိများကို သိရှိခြင်းက Async/Await ၏ အခြေခံမူများကို နားလည်ရန် ပိုမိုလွယ်ကူစေသည်။

syntax

ပုံမှန်အားဖြင့် ၎င်းတွင် သော့ချက်စာလုံး နှစ်ခုပါဝင်သည်- async နှင့် wait. ပထမစကားလုံးက function ကို asynchronous အဖြစ် ပြောင်းလဲပေးပါတယ်။ ထိုသို့သော လုပ်ဆောင်ချက်များသည် စောင့်မျှော်အသုံးပြုခြင်းကို ခွင့်ပြုပါသည်။ အခြားမည်သည့်ကိစ္စတွင်မဆို၊ ဤလုပ်ဆောင်ချက်ကိုအသုံးပြုခြင်းသည် အမှားအယွင်းတစ်ခုဖြစ်ပေါ်လာမည်ဖြစ်သည်။

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

Async ကို function declaration ၏အစတွင် ထည့်သွင်းထားပြီး “=” သင်္ကေတနှင့် ကွင်းစဥ်များကြားတွင် မြှားလုပ်ဆောင်ချက်တစ်ခုအတွက် ထည့်သွင်းထားသည်။

ဤလုပ်ဆောင်ချက်များကို နည်းလမ်းများအဖြစ် object တစ်ခုတွင် ထားရှိနိုင်သည် သို့မဟုတ် class declaration တွင် အသုံးပြုနိုင်သည်။

// 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 class constructors နှင့် getters/setters များသည် asynchronous မဖြစ်နိုင်ကြောင်း မှတ်သားထိုက်ပါသည်။

အဓိပ္ပါယ်ဖွင့်ဆိုချက်နှင့် စီရင်ချက်စည်းမျဉ်းများ

Async လုပ်ဆောင်ချက်များသည် အခြေခံအားဖြင့် ပုံမှန် JS လုပ်ဆောင်ချက်များနှင့် ဆင်တူသော်လည်း ခြွင်းချက်ရှိပါသည်။

ထို့ကြောင့်၊ async လုပ်ဆောင်ချက်များသည် အမြဲတမ်း ကတိများ ပြန်ပေးသည်-

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

အတိအကျပြောရရင် fn က hello ဆိုတဲ့ စာကြောင်းကို ပြန်ပေးပါတယ်။ ကောင်းပြီ၊ ၎င်းသည် ပြတ်ပြတ်သားသားလုပ်ဆောင်မှုတစ်ခုဖြစ်သောကြောင့်၊ တည်ဆောက်သူအား အသုံးပြု၍ string တန်ဖိုးကို ကတိတစ်ခုဖြင့် ထုပ်ပိုးထားသည်။

ဤသည်မှာ 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
 

သို့သော် asynchronous function တွင် error တစ်ခုရှိလျှင် ဘာဖြစ်နိုင်မည်နည်း။

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

မလုပ်ဆောင်ပါက foo() သည် ငြင်းပယ်ခြင်းနှင့်အတူ ကတိတစ်ခုပြန်ပေးပါမည်။ ဤအခြေအနေတွင်၊ အမှားတစ်ခုပါရှိသော Promise.reject ကို Promise.resolve အစား ပြန်ပေးပါမည်။

Async လုပ်ဆောင်ချက်များသည် ပြန်လာသည်ဖြစ်စေ ကတိတစ်ခု အမြဲထုတ်ပေးသည်။

စောင့်မျှော်တိုင်းတွင် Asynchronous လုပ်ဆောင်ချက်များ ခေတ္တရပ်သည်။

စောင့်မျှော်ခြင်းသည် အသုံးအနှုန်းများကို ထိခိုက်စေပါသည်။ ထို့ကြောင့်၊ စကားရပ်သည် ကတိတစ်ခုဖြစ်ပါက၊ ကတိမတည်မချင်း 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 = wait Promise.resolve(9);
• Await ကို အသုံးပြုပြီးနောက်၊ ၎င်း၏တန်ဖိုးကို ရရှိသည်အထိ လုပ်ဆောင်ချက်ကို ဆိုင်းငံ့ထားမည် (လက်ရှိအခြေအနေတွင် ၎င်းသည် 9) ဖြစ်သည်။
• delayAndGetRandom(1000) သည် fn လုပ်ဆောင်ချက်ကို ပြီးမြောက်သည်အထိ (1 စက္ကန့်အကြာ) ခေတ္တရပ်သည်။ ၎င်းသည် fn လုပ်ဆောင်ချက်ကို 1 စက္ကန့်အထိ ထိရောက်စွာ ရပ်တန့်စေသည်။
• delayAndGetRandom(1000) သည် ဖြေရှင်းမှုမှတစ်ဆင့် ကိန်းရှင် b သို့ သတ်မှတ်ပေးသည့် ကျပန်းတန်ဖိုးကို ပြန်ပေးသည်။
• ကောင်းပြီ၊ variable c ရှိသော case သည် variable a ရှိသည့် case နှင့် ဆင်တူသည်။ ယင်းနောက်၊ အရာအားလုံးသည် တစ်စက္ကန့်မျှရပ်တန့်သွားသော်လည်း ယခုအခါတွင် နှောင့်နှေးခြင်းAndGetRandom(1000) သည် မလိုအပ်သောကြောင့် ဘာမှပြန်မလာပါ။
• ထို့ကြောင့် တန်ဖိုးများကို ပုံသေနည်း a+b*c ဖြင့် တွက်ချက်ပါသည်။ ရလဒ်ကို Promise.resolve သုံးပြီး ကတိတစ်ခုနဲ့ ထုပ်ပြီး လုပ်ဆောင်ချက်က ပြန်ပေးတယ်။

ဤခေတ္တရပ်ခြင်းများသည် ES6 ရှိ ဂျင်နရေတာများကို အမှတ်ရနေနိုင်သော်လည်း ၎င်းတွင် တစ်ခုခုရှိပါသည်။ သင်၏အကြောင်းပြချက်များ.

ပြဿနာဖြေရှင်းခြင်း။

ကဲ၊ အခု အထက်မှာ ဖော်ပြခဲ့တဲ့ ပြဿနာရဲ့ အဖြေကို ကြည့်ကြရအောင်။

finishMyTask လုပ်ဆောင်ချက်သည် queryDatabase၊ sendEmail၊ logTaskInFile နှင့် အခြားအရာများကဲ့သို့သော လုပ်ဆောင်ချက်များ၏ ရလဒ်များကို စောင့်ရန် Await ကို အသုံးပြုသည်။ ကတိများအသုံးပြုခဲ့သည့် ဤဖြေရှင်းချက်နှင့် နှိုင်းယှဉ်ပါက ဆင်တူယိုးမှားများ ထင်ရှားလာမည်ဖြစ်သည်။ သို့သော်၊ Async/Await ဗားရှင်းသည် syntactic ရှုပ်ထွေးမှုများကို များစွာရိုးရှင်းစေသည်။ ဤကိစ္စတွင်၊ .then/.catch ကဲ့သို့သော ပြန်လည်ခေါ်ဆိုမှုများနှင့် ကွင်းဆက်များ အများအပြားမရှိပါ။

ဤတွင် ဂဏန်းများ၏ output နှင့် အဖြေတစ်ခုသည် ရွေးချယ်စရာ နှစ်ခုရှိပါသည်။

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 လုပ်ဆောင်ချက်များသည် အမှားများကို ထပ်တူပြု၍ ကိုင်တွယ်ရန် 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 ကို execute လုပ်ရန် မျှော်လင့်ထားသောကြောင့်၊ ၎င်း၏ကိုယ်ပိုင် ချို့ယွင်းချက်သည် catch block ၏ လုပ်ဆောင်မှုကို ဖြစ်ပေါ်စေမည်ဖြစ်သည်။ ရလဒ်အနေဖြင့်၊ function foo သည် သတ်မှတ်မထားသော (စမ်းသုံးဘလောက်တွင် မည်သည့်အရာမှ ပြန်မရနိုင်သည့်အခါ) သို့မဟုတ် အမှားတစ်ခုဖမ်းမိခြင်းဖြင့် အဆုံးသတ်ပါမည်။ ရလဒ်အနေဖြင့်၊ try/catch သည် function foo ကိုယ်တိုင်ကိုင်တွယ်မည်ဖြစ်သောကြောင့် ဤလုပ်ဆောင်ချက်သည် ကျရှုံးမည်မဟုတ်ပါ။

ဒါက နောက်ထပ် ဥပမာတစ်ခုပါ။

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

ဥပမာတွင် canRejectOrReturn သည် foo မှပြန်လာသည်ဟူသောအချက်ကိုအာရုံစိုက်သင့်သည်။ ဤကိစ္စတွင် Foo သည် ပြီးပြည့်စုံသော နံပါတ်ဖြင့် ရပ်စဲသည် သို့မဟုတ် အမှားတစ်ခုကို ပြန်ပေးသည် ("တောင်းပန်ပါတယ် နံပါတ်အရမ်းကြီးတယ်")။ ဖမ်းတုံးကို ဘယ်တော့မှ အကောင်အထည်ဖော်မှာ မဟုတ်ဘူး။

ပြဿနာမှာ canRejectOrReturn မှပေးခဲ့သောကတိကို foo က ပြန်ပေးခြင်းဖြစ်သည်။ ထို့ကြောင့် 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';
  }
}

သင်တွေ့မြင်ရသည့်အတိုင်း၊ ကုဒ်တွင် စောင့်မျှော်ခြင်း သို့မဟုတ် ပြန်လာခြင်းမရှိပါ။ ထို့ကြောင့် foo သည် 1 စက္ကန့်နှောင့်နှေးမှုမရှိဘဲ သတ်မှတ်ထားသောမသတ်မှတ်ထားဘဲ အမြဲတမ်းထွက်သည်။ သို့သော် ကတိတော် ပြည့်စုံလိမ့်မည်။ အမှားအယွင်းတစ်ခု သို့မဟုတ် ငြင်းပယ်ခံရပါက၊ ထို့နောက် UnhandledPromiseRejectionWarning ကို ခေါ်ပါမည်။

Callbacks ရှိ Async လုပ်ဆောင်ချက်များ

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 callback တွင် Await ကို အာရုံစိုက်ရန် ထိုက်တန်ပါသည်။ ဤတွင် အရေအတွက်များသည် ကတိများ အစုံအလင်ဖြစ်ပြီး .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;
}

ဤနေရာတွင် repo နံပါတ်ကို count variable တွင်ထည့်ထားပြီး၊ ထို့နောက် ဤနံပါတ်ကို counts array တွင်ထည့်ထားသည်။ ကုဒ်၏ပြဿနာမှာ ပထမအသုံးပြုသူ၏ဒေတာကို ဆာဗာမှရောက်ရှိသည်အထိ နောက်ဆက်တွဲအသုံးပြုသူအားလုံး အသင့်အနေအထားတွင် ရှိနေမည်ဖြစ်သည်။ ထို့ကြောင့်၊ တစ်ကြိမ်လျှင် အသုံးပြုသူတစ်ဦးသာ လုပ်ဆောင်သည်။

ဥပမာအားဖြင့်၊ သုံးစွဲသူတစ်ဦးကို လုပ်ဆောင်ရန် 300 ms ခန့်ကြာပါက၊ အသုံးပြုသူအားလုံးအတွက် ၎င်းသည် တစ်စက္ကန့်ဖြစ်နေပြီဖြစ်ပြီး၊ အချိန်သည် အသုံးပြုသူအရေအတွက်ပေါ်တွင် မူတည်ပါသည်။ သို့သော် repo အရေအတွက်ကိုရယူခြင်းသည် တစ်ခုနှင့်တစ်ခုအပေါ်မမူတည်သောကြောင့် လုပ်ငန်းစဉ်များကို ပြိုင်တူလုပ်ဆောင်နိုင်သည်။ ၎င်းသည် .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. JavaScript developer သည် ၎င်းကို ကောင်းစွာနားလည်ထားသင့်သည်။

Skillbox မှ အကြံပြုထားသည်-

• လက်တွေ့သင်တန်း "မိုဘိုင်း Developer PRO".
• အသုံးချ အွန်လိုင်းသင်တန်း "Python Data Analyst".
• နှစ်နှစ်စာလက်တွေ့သင်တန်း "ကျွန်တော်က PRO Web Developer တစ်ယောက်ပါ".

source: www.habr.com