Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «async/await для асинхронних запитів». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

## 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 завершиться"

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати638 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.