async & await

Ключові слова async і await використовуються для створення асинхронних функцій.

Асинхронні функції дозволяють писати код так наче функція є синхронна але без блокування потоку виконання.

Асинхронні функції використовують Promise.

async і await були додані в специфікації ES8.

Для оголошення асинхронної функції використовується async:

async function myAsyncFunc(){ /*код асинхронної функції*/ }

Приклад використання промісу без async і await:

function testPromise(){ return new Promise(function(result){ var res=0; for(var i=0;i<1000000;i++) res+=Math.random(); result(res); }); } function test(){ var r = testPromise(); r.then(function(a){alert('результат промісу: '+a)}); } test();

Приклад використання промісу з async і await:

function testPromise(){ return new Promise(function(result){ var res=0; for(var i=0;i<1000000;i++) res+=Math.random(); result(res); }); } async function test(){ var r = await testPromise(); alert('результат промісу: '+r); } test();

В асинхронних функція для обробки помилок в Promise можна використовувати try...catch.

Приклад:

async function funAsync(){ var promise = new Promise(function(res, rej){ setTimeout(function(){res("Тест async");}, 1500); }); var result = await promise; alert(result); } funAsync(); Використання async і await для fetch() async function GET(url){ try{ var res = await fetch(url); var txt= await res.text(); alert(txt); } catch(er){ alert('Error GET\n'+er); } } GET('/ajax.php'); Зверніть увагу що навіть якщо ми повертаємо з асинхронної функції текст для його отримання необхідно викликати Promise.then() так як асинхронна функція завжди повертає Promise async function GET(url){ try{ var res = await fetch(url); var txt= await res.text(); return txt; } catch(er){ return 'Error GET\n'+er; } } GET('/ajax.php').then(function(res){alert(res);}); Асинхрона функція яка завантажує зображення за вказаним масивом URL адрес та повертає проміс з результатом масив зображень. function loadImg(url){ //функція завантаження зображення яка повертає проміс return new Promise(function(resolve, reject){ var img=document.createElement('img'); img.onload=function(){resolve(img)}; img.onerror=function(er){reject(er)}; img.src=url; }); } async function lo(){ //асинхронна функція var res=[]; var img1 = await loadImg('/dani/test.jpg'); var img2 = await loadImg('/dani/test.png'); var img3 = await loadImg('/_images/js.png'); return [img1, img2, img3]; } lo().then(function(res){ alert(res); });