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

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.

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 не потрібна і повернеться саме значення результат функції а не проміс

Використаємо синтаксис 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);
	}
};

async function f1(){
    const url = 'http://lovalhost:3000/book';

    //сам запит до сервера робимо аасинхронно для швидкості
    const p1 = fetch(url);
    const p2 = fetch(url);
    const p3 = fetch(url);
    const p4 = fetch(url);
    const p5 = fetch(url);

    //кладемо проміси у масив
    const promise = [p1,p2,p3,p4,p5]

    //а тепер у результат кладемо результати проміі і чекаємо тільки коли усі вони виконаються
    const result = await Promise.allSettled(promise);

    console.log(result)
}

//Викликаємо саму функцію
f1();