async/await

Синтаксис async/await: писать асинхронный код как синхронный.

Язык примеров:

Шаг 1 из 1Практика

Основы async/await

async — функция возвращает Promise

Добавь async перед функцией — и она всегда вернёт Promise, даже если внутри обычный return.

async function greet() {
  return "Привет!"; // обёрнуто в Promise.resolve("Привет!")
}

greet().then(console.log); // "Привет!"

await — «пауза» до результата Promise

await можно использовать только внутри async функции. Он «приостанавливает» выполнение функции до разрешения Promise, но не блокирует поток.

async function fetchUser(id) {
  const response = await fetch(`/api/users/${id}`);
  const user = await response.json();
  return user;
}

// Это эквивалентно:
function fetchUserWithThen(id) {
  return fetch(`/api/users/${id}`)
    .then(response => response.json());
}

Обработка ошибок через try/catch

async function loadData() {
  try {
    const res = await fetch("/api/data");

    if (!res.ok) {
      throw new Error(`HTTP ${res.status}`);
    }

    const data = await res.json();
    return data;
  } catch (error) {
    console.error("Ошибка загрузки:", error.message);
    return null; // или бросить дальше: throw error
  } finally {
    console.log("Запрос завершён");
  }
}

JavaScript

// Последовательные vs параллельные запросы

// ❌ Медленно — запросы последовательны
async function slow() {
  const user = await fetch("/api/user").then(r => r.json());
  const posts = await fetch("/api/posts").then(r => r.json());
  // Каждый ждёт предыдущего!
  return { user, posts };
}

// ✅ Быстро — запросы параллельны
async function fast() {
  const [user, posts] = await Promise.all([
    fetch("/api/user").then(r => r.json()),
    fetch("/api/posts").then(r => r.json()),
  ]);
  return { user, posts };
}

// ❌ Распространённая ошибка: await внутри map
async function wrong(ids) {
  const results = await ids.map(id => fetch(`/api/${id}`));
  // map не ждёт! results — массив Promise, не данных
}

// ✅ Правильно:
async function correct(ids) {
  const results = await Promise.all(
    ids.map(id => fetch(`/api/${id}`).then(r => r.json()))
  );
  return results;
}

Что вернёт async function hello() { return 42; }?

Promise Fetch API

StudyCode

console.log('start'); setTimeout(() => console.log('setTimeout!'), 0); Promise.resolve().then(() => console.log('Promise!')); console.log('end'); // Вывод: // start // end // Promise! // setTimeout!

async — функция возвращает Promise

Добавь async перед функцией — и она всегда вернёт Promise, даже если внутри обычный return.

async function greet() {
  return "Привет!"; // обёрнуто в Promise.resolve("Привет!")
}

greet().then(console.log); // "Привет!"

await — «пауза» до результата Promise

async function fetchUser(id) {
  const response = await fetch(`/api/users/${id}`);
  const user = await response.json();
  return user;
}

// Это эквивалентно:
function fetchUserWithThen(id) {
  return fetch(`/api/users/${id}`)
    .then(response => response.json());
}

Обработка ошибок через try/catch

async function loadData() {
  try {
    const res = await fetch("/api/data");

    if (!res.ok) {
      throw new Error(`HTTP ${res.status}`);
    }

    const data = await res.json();
    return data;
  } catch (error) {
    console.error("Ошибка загрузки:", error.message);
    return null; // или бросить дальше: throw error
  } finally {
    console.log("Запрос завершён");
  }
}

// Последовательные vs параллельные запросы // ❌ Медленно — запросы последовательны async function slow() { const user = await fetch("/api/user").then(r => r.json()); const posts = await fetch("/api/posts").then(r => r.json()); // Каждый ждёт предыдущего! return { user, posts }; } // ✅ Быстро — запросы параллельны async function fast() { const [user, posts] = await Promise.all([ fetch("/api/user").then(r => r.json()), fetch("/api/posts").then(r => r.json()), ]); return { user, posts }; } // ❌ Распространённая ошибка: await внутри map async function wrong(ids) { const results = await ids.map(id => fetch(`/api/${id}`)); // map не ждёт! results — массив Promise, не данных } // ✅ Правильно: async function correct(ids) { const results = await Promise.all( ids.map(id => fetch(`/api/${id}`).then(r => r.json())) ); return results; }