async / await

Синтактическая надстройка над промисами. Зручний спосіб написання асинхронного коду, який ззовні схожий на синхронний. Цей механізм був доданий до стандарту ECMAScript 2017 (ES8) і став дуже популярним серед розробників завдяки його зручності та зрозумілості. Будь-яка функція може бути асинхронною.

async

Обява

async function asyncFn(){
//завжи повертає Промис
}

const asyncFn = async()=>{
//завжи повертає Промис
}

Для оголошення асинхронного методу об'єкта async додається перед іменем методу.

const user = {
async getUsername() {
// ...
},
};
}

Для оголошення асинхронного методу класу також використовується async перед іменем методу.

class User {
async getUsername() {
// ...
}
}

Виклик

Приклад 1 нормальне повернення

asyncFn()
.then(value=>console.log(value))

Приклад 2 повернення помилки

const asyncFn = async()=>{
throw new Error ('It is error')
}
asyncFn()
.then(value=>console.log(value))
.catch(error=>console.log(error))

Приклад 3 Очикування результату промісу та виконання асінхронного виклику

const timerPromise =()=>
new Promise((resolve, reject)=>
setTimeout(()=>resolve(),2000))
const asyncFN=async()=>{
console.log('Timer start')
await timerPromise()
console.log('timer end')
}
asyncFN() //Віклик асинхронної функції
console.log('after async') //Будк виконано відразу після попередньої невважаючи що попередня ще не закіньчена

Приклад 4 Якщо не вказувати значення для повернення, буде створений проміс зі значенням undefined.

const foo = async () => {
// Не вказуємо значення для повернення
};
foo().then(value => {
console.log(value); // undefined
});

await

Всередині асинхронних функцій можна використовувати оператор await, розмістивши його праворуч від будь-якого виразу, який повертає проміс. Коли інтерпретатор зустрічає await, він призупиняє виконання функції і чекає, доки не завершиться виконання промісу, який знаходиться праворуч від await.

const foo = async () => {
console.log("Before await");
const promiseValue = await new Promise(resolve => {
setTimeout(() => resolve(5), 2000)
});
console.log("After await", promiseValue);
};
foo(); // через 2 секунди виведеться в консоль "After await" 5

Вже .then не потрібна і повернеться саме значення результат функції а не проміс

HTTP-запити

Використаємо синтаксис async/await при роботі з HTTP-запитами, щоб зробити код більш читабельним.

const fetchUsers = async () => {
const response = await axios.get("<https://jsonplaceholder.typicode.com/users>");
return response.data;
};
fetchUsers()
.then(users => console.log(users));

Обробка помилок

Якщо результат асинхронної функції (проміс) не використовується в зовнішньому коді, помилки оброблюються у самому тілі функції за допомогою конструкції try...catch. Значення параметра error у блоці catch — це помилка, яку генерує await, якщо проміс був відхилений.

const fetchUsers = async () => {
try {
const response = await axios.get("<https://jsonplaceholder.typicode.com/users>");
console.log(response.data);
} catch(error) {
console.log(error);
}
};

Приклади