async/await для асинхронних запитів

JavaScriptJunior~2 хв читання

1. Що таке Promise

Promise - це об'єкт, який представляє результат асинхронної операції, яка може завершитися:

успішно (fulfilled) → повертає значення
з помилкою (rejected)
або перебувати в процесі (pending)

Приклад з Promise:

javascript

function getData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve('Дані отримано'), 1000);
  });
}

getData().then(result => console.log(result)); // "Дані отримано"

Тут ми вручну створюємо проміс і обробляємо результат через .then().

2. Що робить async/await

async перетворює функцію на функцію, яка завжди повертає проміс.
await призупиняє виконання коду доти, доки проміс не виконається.

Приклад з async/await:

javascript

async function getData() {
  const result = await new Promise(resolve => {
    setTimeout(() => resolve('Дані отримано'), 1000);
  });
  console.log(result);
}

getData(); // "Дані отримано"

Код став простішим, читабельнішим і виглядає майже як синхронний. Але під капотом - ті самі проміси.

Приклад 2. Порівняння Promise vs async/await

Promise chain:

javascript

fetch('https://api.example.com/user')
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => console.error(err));

async/await:

javascript

async function loadUser() {
  try {
    const res = await fetch('https://api.example.com/user');
    const data = await res.json();
    console.log(data);
  } catch (err) {
    console.error(err);
  }
}

loadUser();

Те саме, але без "драбини з .then()" - читається як звичайний послідовний код.

3. Ключові особливості async/await

Спрощує читання коду

Асинхронні операції можна писати в логічному порядку, а не у вигляді вкладених .then().

Працює лише всередині async-функції

javascript

await fetch('...'); // Помилка - await можна використовувати лише в async-функції

Приклад 3. Використання з кількома промісами

javascript

async function getData() {
  const user = await fetch('/user').then(r => r.json());
  const posts = await fetch('/posts').then(r => r.json());

  console.log(user, posts);
}

Тут другий запит виконається лише після першого - іноді це неефективно.

Якщо запити не залежать один від одного - виконуй паралельно:

javascript

async function getData() {
  const [user, posts] = await Promise.all([
    fetch('/user').then(r => r.json()),
    fetch('/posts').then(r => r.json())
  ]);

  console.log(user, posts);
}

Promise.all() дозволяє запускати кілька асинхронних операцій одночасно.

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

Через try...catch (рекомендується):

javascript

async function getData() {
  try {
    const res = await fetch('https://wrong-url');
    const data = await res.json();
    console.log(data);
  } catch (err) {
    console.error('Помилка запиту:', err);
  }
}

Через .catch() (менш зручно):

javascript

getData().catch(err => console.error(err));

5. Повернення значення з async-функції

javascript

async function sum(a, b) {
  return a + b;
}

const result = sum(2, 3);
console.log(result); // Promise { 5 }

async завжди повертає Promise, навіть якщо ти явно повертаєш звичайне значення.

Щоб отримати результат:

javascript

sum(2, 3).then(console.log); // 5

або

javascript

const result = await sum(2, 3);
console.log(result); // 5

6. Відмінності async/await від Promise.then

Критерій	`Promise / .then()`	`async/await`
Синтаксис	Ланцюжки `.then()`	Послідовний, як синхронний код
Обробка помилок	`.catch()`	`try...catch`
Читабельність	Іноді складна через вкладеність	Дуже висока
Паралельне виконання	`Promise.all()`	Те саме
Повернення значення	Неявно через `.then()`	Через `return` всередині async-функції
Тип функції	Звичайна	Завжди повертає `Promise`

Приклад 4. Порівняння наочно

Promise chain:

javascript

getUser()
  .then(user => getPosts(user.id))
  .then(posts => getComments(posts[0].id))
  .then(comments => console.log(comments))
  .catch(err => console.error(err));

async/await:

javascript

async function loadComments() {
  try {
    const user = await getUser();
    const posts = await getPosts(user.id);
    const comments = await getComments(posts[0].id);
    console.log(comments);
  } catch (err) {
    console.error(err);
  }
}

async/await робить асинхронну логіку покроковою і передбачуваною, особливо якщо потрібно обробити помилку на будь-якому етапі.

Коротко:

async/await - це "синтаксичний цукор" над Promise, який дозволяє писати асинхронний код як синхронний, а під капотом при цьому працюють ті самі проміси.

Формула для запам'ятовування: async → функція повертає Promise await → "почекай, поки Promise завершиться"

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.