Async/await

Супроводжувати синхронний код завжди простіше, ніж асинхронний. У 2012 році в мові C# з’явився синтаксичний цукор, який значно спростив роботу з асинхронними операціями: замість вкладених callback можна було використовувати послідовний синтаксис з новими ключовими словами async та await. Згодом цю концепцію перейняли й інші мови програмування, зокрема Python та JavaScript. В JavaScript підтримку async/await додали у 2017 році.

Призначення ключових слів
async - додається до функції та вказує, що вона завжди повертає Promise.
await - використовується перед об’єктом-промісом, щоб "дочекатися" результату перед виконанням наступних рядків коду.

Перепишемо попередній приклад із завантаженням зображень, використовуючи async/await:

let image = null;

image = await downloadImage(url1);
document.body.append(image);

image = await downloadImage(url2);
document.body.append(image);

image = await downloadImage(url3);
document.body.append(image);

Тепер код виглядає як звичайний синхронний: немає вкладених callback, усе читається рядок за рядком. Можна подумати, що await "зупиняє" виконання, очікуючи на результат промісу. Насправді ж код не блокує основний потік - під капотом він перетворюється на машину станів, де кожен стан описує дію до або після await.

Ще одна перевага async/await - знайомий синтаксис для обробки помилок:

try {
let image = null;

image = await downloadImage(url1);
document.body.append(image);

image = await downloadImage(url2);
document.body.append(image);

image = await downloadImage(url3);
document.body.append(image);
} catch (ex) {
// обробка помилки
}

У результаті асинхронний код виглядає так само зрозуміло, як і синхронний, що значно спрощує його супровід.