Что такое async/await?

Async/Await в JavaScript — синтаксический сахар для Promise

Async/Await — это современный способ написания асинхронного кода, который выглядит синхронным, но работает асинхронно.

История развития

// ❌ Callback hell
function fetchUserData(id, callback) {
  fetch(`/api/users/${id}`)
    .then(res => res.json())
    .then(user => {
      fetch(`/api/posts/${user.id}`)
        .then(res => res.json())
        .then(posts => callback(posts))
    })
}

// ✅ Async/Await (современно)
async function fetchUserData(id) {
  const user = await fetch(`/api/users/${id}`).then(r => r.json());
  const posts = await fetch(`/api/posts/${user.id}`).then(r => r.json());
  return posts;
}

Синтаксис

async function getData() {
  const data = await fetch('/api/data');
  return data;
}

const promise = getData(); // Всегда возвращает Promise

Обработка ошибок

// С Promise (старо)
fetch('/api/data')
  .then(res => res.json())
  .catch(error => console.error(error));

// С async/await (более читаемо)
async function fetchData() {
  try {
    const response = await fetch('/api/data');
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Error:', error);
  }
}

Параллельное выполнение

// ❌ Неправильно — последовательно (медленно)
async function slowFetch() {
  const user = await fetch('/api/user').then(r => r.json());
  const posts = await fetch('/api/posts').then(r => r.json());
  const comments = await fetch('/api/comments').then(r => r.json());
  // Время: 3 * delay
}

// ✅ Правильно — параллельно (быстро)
async function fastFetch() {
  const [user, posts, comments] = await Promise.all([
    fetch('/api/user').then(r => r.json()),
    fetch('/api/posts').then(r => r.json()),
    fetch('/api/comments').then(r => r.json())
  ]);
  // Время: 1 * delay
}

Backend пример

app.get('/users/:id', async (req, res) => {
  try {
    const user = await db.query(
      'SELECT * FROM users WHERE id = $1',
      [req.params.id]
    );
    
    if (!user.rows[0]) {
      return res.status(404).json({ error: 'Not found' });
    }
    
    const posts = await db.query(
      'SELECT * FROM posts WHERE user_id = $1',
      [req.params.id]
    );
    
    res.json({
      user: user.rows[0],
      posts: posts.rows
    });
  } catch (error) {
    res.status(500).json({ error: 'Internal server error' });
  }
});

Важные правила

// 1. await работает только в async функции
async function getData() {
  const data = await fetch('/api/data');
  return data;
}

// 2. Всегда обрабатывай ошибки
async function safeFetch() {
  try {
    return await fetch('/api/data');
  } catch (error) {
    console.error(error);
    throw error;
  }
}

// 3. Promise.all() для параллельных операций
const [user, posts] = await Promise.all([
  getUser(id),
  getPosts(id)
]);

// 4. Promise.race() для таймаутов
const result = await Promise.race([
  fetch('/api/data'),
  new Promise((_, reject) =>
    setTimeout(() => reject(new Error('Timeout')), 5000)
  )
]);

Key takeaway

• Async/Await = синтаксический сахар для Promise
• Код выглядит синхронным, работает асинхронно
• Всегда обрабатывай ошибки через try/catch
• Promise.all() для параллельных операций
• Избегай последовательных await без необходимости