Async / Await

"Ասինխրոն կոդի էվոլյուցիան"

Ներածություն

async և await բանալի բառերը ներմուծվել են ES2017 (ES8) ստանդարտով և հեղաշրջում են կատարել JavaScript-ում ասինխրոն գործողությունների գրելաձևի մեջ: Դրանք թույլ են տալիս գրել ասինխրոն կոդ, որը տեսքով և ընթերցելիությամբ նման է սովորական սինխրոն կոդին:

1. Ի՞նչ է Async-ը

async բանալի բառը դրվում է ֆունկցիայից առաջ: Այն երաշխավորում է երկու բան.

Ֆունկցիան միշտ վերադարձնում է Promise:
Եթե ֆունկցիան վերադարձնում է սովորական արժեք, JavaScript-ն այն ավտոմատ կերպով «փաթաթում» է Promise.resolve()-ի մեջ:

2. Ի՞նչ է Await-ը

await բանալի բառն աշխատում է միայն async ֆունկցիաների ներսում: Այն ստիպում է JavaScript-ին սպասել այնքան ժամանակ, մինչև Promise-ը կատարվի (resolve) կամ մերժվի (reject):

Կարևոր է. await-ը չի արգելափակում (block) ամբողջ ծրագրի աշխատանքը: Մինչ ֆունկցիան սպասում է պատասխանի, JavaScript-ի Engine-ը շարունակում է կատարել այլ գործողություններ (օրինակ՝ UI-ի թարմացում):

Ինչպե՞ս է դա աշխատում

Վիզուալիզացիա և Օգտագործում

4. Ինչո՞ւ օգտագործել Async / Await

Առավելություն	Նկարագրություն
Ընթերցելիություն	Կոդը դառնում է գծային (Linear): Այլևս չկան բազմաթիվ `.then()` շղթաներ:
Error Handling	Կարելի է օգտագործել ստանդարտ `try...catch` կառուցվածքը՝ սխալները բռնելու համար:
Debugging	Debug անելիս `await`-ը թույլ է տալիս կանգնել կոնկրետ տողի վրա, ինչպես սովորական կոդում:
Conditional Code	Ավելի հեշտ է գրել պայմաններ (if/else), որոնք կախված են ասինխրոն պատասխանից:

Համեմատություն

Promises vs Async/Await

Promises (.then)

function load() {
  fetch('/api')
    .then(res => res.json())
    .then(data => console.log(data));
}

Async / Await

async function load() {
  const res = await fetch('/api');
  const data = await res.json();
  console.log(data);
}

🚀 Pro-Tip Զուգահեռ Հարցումների համար

Եթե ունես մի քանի անկախ հարցումներ, մի՛ օգտագործիր await ամեն տողում, քանի որ դա կդանդաղեցնի աշխատանքը: Օգտագործիր Promise.all(), որպեսզի հարցումները կատարվեն զուգահեռ, իսկ հետո նոր await արա ամբողջ զանգվածի վրա:

←

Նախորդը Promises

🎉

Հաջորդը Գլխավոր էջ