តោះមើល Async/Await ក្នុង JavaScript ដោយប្រើឧទាហរណ៍

អ្នកនិពន្ធអត្ថបទពិនិត្យមើលឧទាហរណ៍នៃ Async/Await នៅក្នុង JavaScript ។ សរុបមក Async/Await គឺជាមធ្យោបាយងាយស្រួលក្នុងការសរសេរកូដអសមកាល។ មុនពេលលក្ខណៈពិសេសនេះលេចឡើង កូដបែបនេះត្រូវបានសរសេរដោយប្រើការហៅត្រឡប់មកវិញ និងការសន្យា។ អ្នកនិពន្ធអត្ថបទដើមបង្ហាញពីគុណសម្បត្តិរបស់ Async/Await ដោយការវិភាគឧទាហរណ៍ផ្សេងៗ។

យើងរំលឹក៖ សម្រាប់អ្នកអានទាំងអស់នៃ "Habr" - ការបញ្ចុះតម្លៃ 10 rubles នៅពេលចុះឈ្មោះក្នុងវគ្គសិក្សា Skillbox ណាមួយដោយប្រើលេខកូដផ្សព្វផ្សាយ "Habr" ។

Skillbox ណែនាំ៖ វគ្គសិក្សាតាមអ៊ីនធឺណិត "អ្នកអភិវឌ្ឍន៍ Java".

ហៅទៅវិញ

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។ ពួកគេអនុញ្ញាតឱ្យអ្នកជំនួសសំបុកជ្រៅនៃការហៅត្រឡប់មកវិញដោយពាក្យ .then ។

ទិដ្ឋភាពវិជ្ជមាននៃការសន្យាគឺថាពួកគេធ្វើឱ្យកូដអាចអានបានកាន់តែល្អពីកំពូលទៅបាតជាជាងពីឆ្វេងទៅស្តាំ។ ទោះយ៉ាងណាក៏ដោយ ការសន្យាក៏មានបញ្ហារបស់ពួកគេផងដែរ៖

• អ្នកត្រូវបន្ថែមច្រើន។
• ជំនួសឱ្យ try/catch, .catch ត្រូវបានប្រើដើម្បីដោះស្រាយរាល់កំហុស។
• ការធ្វើការជាមួយការសន្យាជាច្រើននៅក្នុងរង្វិលជុំមួយគឺមិនតែងតែងាយស្រួលនោះទេ ក្នុងករណីខ្លះវាធ្វើឱ្យកូដស្មុគស្មាញ។

នេះគឺជាបញ្ហាដែលនឹងបង្ហាញពីអត្ថន័យនៃចំណុចចុងក្រោយ។

ឧបមាថាយើងមានសម្រាប់រង្វិលជុំដែលបោះពុម្ពលំដាប់នៃលេខពី 0 ទៅ 10 នៅចន្លោះពេលចៃដន្យ (0–n វិនាទី)។ ដោយប្រើការសន្យា អ្នកត្រូវផ្លាស់ប្តូររង្វិលជុំនេះដើម្បីឱ្យលេខត្រូវបានបោះពុម្ពតាមលំដាប់លំដោយពី 0 ទៅ 10។ ដូច្នេះ ប្រសិនបើវាត្រូវការពេល 6 វិនាទីដើម្បីបោះពុម្ពលេខសូន្យ និង 2 វិនាទីដើម្បីបោះពុម្ពលេខសូន្យគួរតែត្រូវបានបោះពុម្ពជាមុនសិន ហើយបន្ទាប់មក ការរាប់ថយក្រោយសម្រាប់ការបោះពុម្ពនឹងចាប់ផ្តើម។

ហើយជាការពិតណាស់ យើងមិនប្រើ Async/Await ឬ .sort ដើម្បីដោះស្រាយបញ្ហានេះទេ។ ឧទាហរណ៍ដំណោះស្រាយគឺនៅចុងបញ្ចប់។

មុខងារ Async

ការបន្ថែមមុខងារ async នៅក្នុង ES2017 (ES8) បានធ្វើឱ្យការងារងាយស្រួលជាមួយនឹងការសន្យា។ ខ្ញុំកត់សម្គាល់ថាមុខងារ async ដំណើរការ "នៅលើកំពូល" នៃការសន្យា។ មុខងារទាំងនេះមិនតំណាងឱ្យគោលគំនិតផ្សេងគ្នាប្រកបដោយគុណភាពទេ។ មុខងារ Async ត្រូវបានបម្រុងទុកជាជម្រើសមួយសម្រាប់កូដដែលប្រើការសន្យា។

Async/Await ធ្វើឱ្យវាអាចរៀបចំការងារជាមួយកូដអសមកាលក្នុងរចនាប័ទ្មសមកាលកម្មមួយ។

ដូច្នេះ ការដឹងពីការសន្យាធ្វើឱ្យវាកាន់តែងាយស្រួលក្នុងការយល់អំពីគោលការណ៍នៃ Async/Await ។

វាក្យសម្ព័ន្ធ

ជាធម្មតាវាមានពាក្យគន្លឹះពីរ៖ async និង wait ។ ពាក្យទីមួយប្រែមុខងារទៅជាអសមកាល។ មុខងារបែបនេះអនុញ្ញាតឱ្យប្រើការរង់ចាំ។ ក្នុងករណីផ្សេងទៀត ការប្រើមុខងារនេះនឹងបង្កើតកំហុស។

// 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! វាគួរអោយចងចាំថា class constructors និង getters/setters មិនអាចធ្វើសមកាលកម្មបានទេ។

ក្បួនដោះស្រាយពាក្យ និងការអនុវត្ត

មុខងារ Async មានមូលដ្ឋានស្រដៀងគ្នាទៅនឹងមុខងារ JS ស្តង់ដារ ប៉ុន្តែមានករណីលើកលែង។

ដូច្នេះ មុខងារ async តែងតែត្រលប់មកវិញនូវការសន្យា៖

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

ជាពិសេស fn ត្រឡប់ខ្សែអក្សរ hello ។ ជាការប្រសើរណាស់ ដោយសារនេះជាមុខងារអសមកាល តម្លៃខ្សែអក្សរត្រូវបានរុំដោយការសន្យាដោយប្រើ constructor ។

នេះជាការរចនាជំនួសដោយគ្មាន 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.reject ដែលមានកំហុសនឹងត្រូវបានបញ្ជូនមកវិញជំនួសឱ្យ Promise.resolve ។

មុខងារ 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 យ៉ាងមានប្រសិទ្ធភាពរយៈពេល 1 វិនាទី។
• delayAndGetRandom(1000) តាមរយៈការដោះស្រាយ ត្រឡប់តម្លៃចៃដន្យ ដែលបន្ទាប់មកត្រូវបានកំណត់ទៅអថេរ ខ។
• ជាការប្រសើរណាស់ ករណីដែលមានអថេរ c គឺស្រដៀងនឹងករណីដែលមានអថេរ a ។ បន្ទាប់ពីនោះ អ្វីគ្រប់យ៉ាងឈប់មួយវិនាទី ប៉ុន្តែឥឡូវនេះ delayAndGetRandom(1000) ត្រឡប់គ្មានអ្វីសោះព្រោះវាមិនត្រូវបានទាមទារ។
• ជាលទ្ធផលតម្លៃត្រូវបានគណនាដោយប្រើរូបមន្ត a + b * c ។ លទ្ធផលត្រូវបានរុំដោយការសន្យាដោយប្រើ Promise.resolve ហើយត្រឡប់ដោយមុខងារ។

ការផ្អាកទាំងនេះអាចជាការនឹកឃើញដល់ម៉ាស៊ីនភ្លើងនៅក្នុង ES6 ប៉ុន្តែមានអ្វីម្យ៉ាងចំពោះវា។ ហេតុផលរបស់អ្នក។.

ការដោះស្រាយបញ្ហា

មែនហើយឥឡូវនេះសូមក្រឡេកមើលដំណោះស្រាយចំពោះបញ្ហាដែលបានរៀបរាប់ខាងលើ។

មុខងារ finishMyTask ប្រើ Await ដើម្បីរង់ចាំលទ្ធផលនៃប្រតិបត្តិការដូចជា 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 អាចប្រើ 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 ដើម្បីប្រតិបត្តិ ការបរាជ័យរបស់វាផ្ទាល់នឹងនាំឱ្យមានការប្រតិបត្តិនៃប្លុកចាប់។ ជាលទ្ធផល មុខងារ foo នឹងបញ្ចប់ដោយមិនបានកំណត់ (នៅពេលដែលគ្មានអ្វីត្រូវបានត្រឡប់មកវិញនៅក្នុងប្លុកសាកល្បង) ឬជាមួយនឹងកំហុសចាប់បាន។ ជាលទ្ធផល មុខងារនេះនឹងមិនបរាជ័យទេ ពីព្រោះការព្យាយាម/ចាប់នឹងគ្រប់គ្រងមុខងារនេះដោយខ្លួនឯង។

នេះជាឧទាហរណ៍មួយទៀត៖

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

វាគួរអោយយកចិត្តទុកដាក់ចំពោះការពិតដែលថានៅក្នុងឧទាហរណ៍ canRejectOrReturn ត្រូវបានត្រលប់ពី foo ។ 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';
  }
}

ដូចដែលអ្នកអាចឃើញមិនមានការរង់ចាំឬការត្រឡប់មកវិញនៅក្នុងកូដនោះទេ។ ដូច្នេះ foo តែងតែចេញដោយមិនបានកំណត់ដោយគ្មានការពន្យាពេល 1 វិនាទី។ ប៉ុន្តែការសន្យានឹងត្រូវបានសម្រេច។ ប្រសិនបើវាបោះចោលកំហុស ឬការបដិសេធ នោះ UnhandledPromiseRejectionWarning នឹងត្រូវបានហៅ។

មុខងារ Async ក្នុង Callbacks

មុខងារ Async ត្រូវបានគេប្រើជាញឹកញាប់នៅក្នុង .map ឬ .filter ជាការហៅត្រឡប់មកវិញ។ ឧទាហរណ៍មួយគឺមុខងារ fetchPublicReposCount(ឈ្មោះអ្នកប្រើប្រាស់) ដែលត្រឡប់ចំនួនឃ្លាំងដែលបើកនៅលើ 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;
});

វាគួរអោយយកចិត្តទុកដាក់ចំពោះ Await នៅក្នុង .map callback។ ការរាប់នៅទីនេះគឺជាអារេនៃការសន្យា ហើយ .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 ត្រូវបានដាក់ក្នុងអថេររាប់ បន្ទាប់មកលេខនេះត្រូវបានបន្ថែមទៅអារេរាប់។ បញ្ហាជាមួយកូដគឺថារហូតដល់ទិន្នន័យរបស់អ្នកប្រើដំបូងមកដល់ពីម៉ាស៊ីនមេ អ្នកប្រើប្រាស់ជាបន្តបន្ទាប់ទាំងអស់នឹងស្ថិតក្នុងរបៀបរង់ចាំ។ ដូច្នេះមានតែអ្នកប្រើប្រាស់ម្នាក់ប៉ុណ្ណោះដែលត្រូវបានដំណើរការក្នុងពេលតែមួយ។

ឧទាហរណ៍ ប្រសិនបើវាត្រូវចំណាយពេលប្រហែល 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 គួរតែដឹងច្បាស់ក្នុងរឿងនេះ។

Skillbox ណែនាំ៖

• វគ្គសិក្សាជាក់ស្តែង "អ្នកអភិវឌ្ឍន៍ចល័ត PRO".
• បានអនុវត្តវគ្គសិក្សាតាមអ៊ីនធឺណិត "អ្នកវិភាគទិន្នន័យនៅក្នុង Python".
• វគ្គសិក្សាជាក់ស្តែងរយៈពេលពីរឆ្នាំ "ខ្ញុំជាអ្នកបង្កើតគេហទំព័រ PRO".

ប្រភព: www.habr.com