await і стрілочні функції

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

1. `await` працює лише всередині `async`-функцій

await - це оператор, який можна використовувати лише всередині функції, оголошеної з ключовим словом async, або на верхньому рівні модуля (top-level await).

Якщо використати await поза async, буде синтаксична помилка:

javascript

// Помилка
const result = await Promise.resolve(42);
// SyntaxError: await is only valid in async functions

2. Правильний синтаксис зі стрілочною функцією

Щоб використовувати await, потрібно зробити стрілочну функцію асинхронною:

javascript

const fetchData = async () => {
  const data = await Promise.resolve('Готово');
  console.log(data);
};

fetchData();

Результат:

javascript

Готово

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

3. Якщо не вказати `async` - `await` не спрацює

javascript

const foo = () => {
  const data = await Promise.resolve('Помилка');
  console.log(data);
};

// SyntaxError: await is only valid in async functions

Без async - це просто синтаксична помилка. JS навіть не виконає код, тому що await недопустимий у звичайній функції.

4. Значення, що повертається

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

javascript

const sum = async (a, b) => a + b;

console.log(sum(1, 2)); // Promise { 3 }

Це те саме, що:

javascript

function sum(a, b) {
  return Promise.resolve(a + b);
}

5. Приклади різних форм запису

Звичайна стрілочна функція з await:

javascript

const loadUser = async () => {
  const res = await fetch('/api/user');
  return res.json();
};

З параметрами:

javascript

const getUser = async (id) => {
  const res = await fetch(`/api/user/${id}`);
  return res.json();
};

Багаторядкова форма:

javascript

const processData = async () => {
  const data = await fetch('/api/data');
  const json = await data.json();
  console.log(json);
};

У ланцюжку промісів:

javascript

Promise.resolve('A')
  .then(async (x) => {
    const y = await Promise.resolve('B');
    return x + y;
  })
  .then(console.log); // "AB"

Тут then() приймає async-стрілочну функцію, і await усередині неї повністю легальний.

6. `await` на верхньому рівні (top-level await)

Сучасні JS-модулі (ESM) дозволяють використовувати await поза функціями, якщо код у модулі (а не в <script> без type="module"):

javascript

// main.js
const data = await fetch('/api/data').then(r => r.json());
console.log(data);

Це top-level await - працює лише в ESM (або в Node.js з "type": "module").

Проста аналогія

async перед стрілочною функцією - це як паспорт, який дає дозвіл використовувати await усередині.

Без нього await просто не знає, куди повертати результат.

ПІДСУМОК

Питання	Відповідь
Чи можна використовувати `await` у стрілочній функції?	Так, якщо вона оголошена як `async`
Що якщо немає `async`?	SyntaxError: await is only valid in async functions
Що повертає `async`-стрілка?	Завжди `Promise`
Чи можна `await` у `.then()` або колбеках?	Так, якщо колбек `async`
Чи можна `await` поза функцією?	Тільки з top-level await у модулях

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

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

Premium

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