Что такое await и как оно работает?

Краткий ответ

Ключевое слово await используется внутри асинхронных функций (с [async]) для ожидания выполнения Promise. Оно “останавливает” выполнение функции до тех пор, пока Promise не завершится, и возвращает результат Promise. Это делает асинхронный код похожим на синхронный.

// Асинхронная функция с await
async function fetchData() {
  console.log('Начинаю загрузку...');
  const response = await fetch('/api/data'); // Ждём ответ
  const data = await response.json();        // Ждём парсинг
  return data;
}
 
// Использование
fetchData().then(result => console.log(result));

Полный ответ

Ключевое слово [await] — как диспетчер на аэропорту, который говорит самолёту: “Подождите, пока не будет готова полоса, тогда можете взлетать”. [await] заставляет код ждать завершения асинхронной операции, не блокируя при этом весь сайт! ✈️

Что такое await

Ключевое слово [await] можно использовать только внутри асинхронных функций (с [async]). Оно ждет завершения Promise и возвращает его результат:

Простые примеры

Базовое использование await

async function example() {
  console.log('Начало');
  
  // Ждём 2 секунды
  await new Promise(resolve => setTimeout(resolve, 2000));
  
  console.log('Прошло 2 секунды');
  return 'Готово';
}

Работа с сетью

async function getUserData() {
  try {
    const response = await fetch('/api/user');
    const userData = await response.json();
    return userData;
  } catch (error) {
    console.log('Ошибка загрузки:', error);
  }
}

Как работает await

Пошаговое выполнение

async function stepByStep() {
  console.log('1. Начало');
  
  const result1 = await Promise.resolve('Первый результат');
  console.log('2.', result1);
  
  const result2 = await Promise.resolve('Второй результат');
  console.log('3.', result2);
  
  console.log('4. Конец');
}
 
stepByStep();
// Вывод:
// 1. Начало
// 2. Первый результат
// 3. Второй результат
// 4. Конец

Не блокирует весь код

async function asyncTask() {
  console.log('Задача началась');
  await new Promise(resolve => setTimeout(resolve, 3000));
  console.log('Задача завершена');
}
 
console.log('1. Начало');
asyncTask(); // Начинает выполнение, но не блокирует
console.log('2. Продолжение'); // Выполняется сразу
console.log('3. Конец'); // Выполняется сразу
// Через 3 секунды: 'Задача завершена'

Когда использовать await

Для упрощения асинхронного кода

// Вместо цепочек .then()
// fetch('/api/data')
//   .then(response => response.json())
//   .then(data => processData(data))
//   .then(result => console.log(result))
//   .catch(error => console.log(error));
 
// С await код чище
async function handleData() {
  try {
    const response = await fetch('/api/data');
    const data = await response.json();
    const result = processData(data);
    console.log(result);
  } catch (error) {
    console.log('Ошибка:', error);
  }
}

Для последовательных операций

async function sequentialOperations() {
  const user = await fetchUser();
  const posts = await fetchUserPosts(user.id);
  const comments = await fetchPostComments(posts[0].id);
  return { user, posts, comments };
}

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

Использование вне async функций

// ❌ Ошибка — await вне async функции
// function bad() {
//   const result = await somePromise(); // SyntaxError!
// }
 
// ✅ Правильно
async function good() {
  const result = await somePromise(); // Работает!
}

Забыть об обработке ошибок

// ❌ Ошибка — не обработана ошибка
// async function risky() {
//   const data = await fetch('/api/data');
//   // Если fetch завершится ошибкой, она "упадёт" наверх
// }
 
// ✅ Правильно — обработка ошибок
async function safe() {
  try {
    const data = await fetch('/api/data');
  } catch (error) {
    console.log('Ошибка:', error);
  }
}

Простые правила

await — ждёт завершения Promise и возвращает результат ⏱️
Только в async — использовать можно только внутри async функций 🚫
Не блокирует — останавливает только текущую функцию, не весь код ⚡
Читаемость — делает асинхронный код похожим на синхронный 📖
Ошибки — используй try/catch для обработки ошибок ⚠️

Ключевое слово [await] — это мощный инструмент для работы с асинхронными операциями, делающий код более читаемым и понятным! 💪

Хотите больше статей для подготовки к собеседованиям? Подписывайтесь на EasyAdvice, добавляйте сайт в закладки и совершенствуйтесь каждый день 💪