В чем разница между вызовом Then-метода и Await-метода?

Разница между .then() и await

Синтаксис и читаемость

then() — это классический способ работы с Promise, появившийся с ES6. Он создаёт цепочку обработчиков:

function getUser(id: number) {
  return fetch(`/api/users/${id}`)
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error(error));
}

await — синтаксический сахар из ES2017, позволяющий писать асинхронный код как синхронный:

async function getUser(id: number) {
  try {
    const response = await fetch(`/api/users/${id}`);
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

Код с await читается более естественно и по структуре похож на синхронный код. Это снижает когнитивную нагрузку и облегчает отладку.

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

С .then() обработка ошибок отделена от основной логики:

fetchData()
  .then(result => processResult(result))
  .then(final => console.log(final))
  .catch(error => {
    // Ловит ошибку на любом этапе цепи
    console.error(error);
  });

С await используется стандартный try/catch блок:

try {
  const result = await fetchData();
  const final = await processResult(result);
  console.log(final);
} catch (error) {
  console.error(error);
}

Тry/catch более привычен для разработчиков, пришедших из синхронного кода.

Выполнение запросов

Параллельные запросы с then():

Promise.all([
  fetch("/api/users"),
  fetch("/api/posts"),
  fetch("/api/comments")
])
  .then(responses => Promise.all(responses.map(r => r.json())))
  .then(([users, posts, comments]) => {
    console.log(users, posts, comments);
  });

Параллельные запросы с await:

const [users, posts, comments] = await Promise.all([
  fetch("/api/users").then(r => r.json()),
  fetch("/api/posts").then(r => r.json()),
  fetch("/api/comments").then(r => r.json())
]);
console.log(users, posts, comments);

Контекст и область видимости

С .then() каждый обработчик создаёт новую область видимости:

fetchUser(1)
  .then(user => {
    console.log(user.id); // доступен
    return fetchPosts(user.id);
  })
  .then(posts => {
    console.log(user.id); // ОШИБКА: user не определён
    console.log(posts);
  });

С await переменная доступна во всей функции:

async function fetchUserData(id: number) {
  const user = await fetchUser(id);
  const posts = await fetchPosts(user.id);
  console.log(user.id, posts); // оба доступны
}

Производительность и лучшие практики

• await компилируется в .then() на низком уровне, поэтому производительность идентична
• Используй await в современном коде — это стандарт ES2017
• then() полезен для работы с тяжелыми цепочками или функциональным стилем
• Избегай await в циклах без необходимости — запросы выполняются последовательно. Для параллельного выполнения используй Promise.all()

Заключение

Awa позволяет писать более понятный и поддерживаемый код. Современные Node.js приложения используют именно await. However, понимание механики .then() критично для работы с legacy кодом и сложными сценариями обработки ошибок.