JS Async

async/await

Научиться писать асинхронный код в синхронном стиле с помощью async/await и обрабатывать ошибки через try/catch.

Средний (Intermediate)
Нужно знать:Промисы (Promises)

Кратко

async function всегда возвращает Promise. await приостанавливает выполнение ЭТОЙ async-функции до завершения Promise. await НЕ блокирует весь JavaScript — он блокирует только текущую async-функцию. try/catch с await ловит ошибки reject.


Подробно

async/await — синтаксический сахар над Promises:

async function getUser() { const response = await fetch('/api/user'); const user = await response.json(); return user; }

Это эквивалентно: function getUser() { return fetch('/api/user') .then(response => response.json()); }

Что делает async:

  • Возвращает Promise
  • Позволяет использовать await внутри

Что делает await:

  • Приостанавливает выполнение ЭТОЙ функции
  • Ждёт settlement Promise
  • Возвращает результат (resolve) или выбрасывает ошибку (reject)
  • НЕ блокирует весь поток!

try/catch с await: async function loadData() { try { const response = await fetch('/api/data'); if (!response.ok) { throw new Error(HTTP ${response.status}); } const data = await response.json(); console.log(data); } catch (error) { console.log(Ошибка: ${error.message}); } finally { console.log('Завершено'); } }

Параллельные операции: // Последовательно (медленно): const users = await fetchUsers(); const posts = await fetchPosts(); // ждём users!

// Параллельно (быстро): const [users, posts] = await Promise.all([ fetchUsers(), fetchPosts() ]);


Ментальная модель

await — как очередь в магазине. Вы встаёте в очередь (await), но это НЕ значит, что весь мир замер. Другие люди (другой код) продолжают работать. Вы просто ждёте свою очередь. Когда кассир готов (Promise resolved) — вы получаете результат.


Примеры

**Самый простой:**

javascript
async function greet() {
  return 'Привет!'; // автоматически оборачивается в Promise
}

greet().then(msg => console.log(msg)); // 'Привет!'

async функция всегда возвращает Promise.

**Простой:**

javascript
function delay(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function main() {
  console.log('Начало');
  await delay(1000); // ждём 1 секунду
  console.log('Через секунду');
  await delay(1000);
  console.log('Ещё секунду');
}

main();
// Вывод: Начало → (1сек) Через секунду → (1сек) Ещё секунду

await приостанавливает только текущую async-функцию.

**Реальный пример:**

javascript
async function fetchUserData(userId) {
  try {
    const response = await fetch(`/api/users/${userId}`);
    
    if (!response.ok) {
      throw new Error(`HTTP ${response.status}: ${response.statusText}`);
    }
    
    const user = await response.json();
    console.log(`Имя: ${user.name}`);
    return user;
    
  } catch (error) {
    if (error.name === 'TypeError') {
      console.log('Проблема с сетью');
    } else {
      console.log(`Ошибка: ${error.message}`);
    }
    throw error; // пробрасываем дальше
  }
}

// Вызываем внутри другой async-функции:
async function init() {
  await fetchUserData(1);
}
init();

// Top-level await (await вне функции) работает только в ES-модулях
// или в консоли DevTools — в обычном скрипте так писать нельзя.

try/catch с await для обработки ошибок сети и HTTP.


Частые ошибки

**Неправильно:** Думать, что await блокирует весь браузер

**Почему:** await блокирует ТОЛЬКО текущую async-функцию. Другой код продолжает выполняться.

**Правильно:** await = пауза в async-функции, не во всём приложении.

**Неправильно:** Забывать await перед fetch

**Почему:** fetch возвращает Promise, а не Response. Без await response — это Promise, не объект.

**Правильно:** const response = await fetch(...);

**Неправильно:** Использовать await вне async-функции

**Почему:** await работает только внутри async-функций (или в top-level в модулях).

**Правильно:** Оберните в async функцию или используйте .then().

**Неправильно:** Забывать проверять response.ok

**Почему:** fetch НЕ reject на HTTP 404/500! Он resolve с response.ok = false.

**Правильно:** Всегда проверяйте response.ok или response.status.


Важно запомнить

  • async функция всегда возвращает Promise
  • await приостанавливает только свою async-функцию
  • await НЕ блокирует весь JavaScript
  • try/catch для обработки ошибок с await
  • fetch resolve даже на HTTP 404/500 — проверяйте response.ok

Связь

Назад: Вы понимаете промисы (JA4) — async/await делает их чтение проще.

Вперёд: Следующий урок (JA6) — комбинаторы промисов для параллельного выполнения.


Читайте дальше

Материалы курса JS Async — PROlab Academy.