JS. Async. Promise. Реализация

🧱 Суть

async/await и Promise – это два способа работы с асинхронным кодом.
async/await не заменяет Promise, а является более удобным синтаксисом поверх него.

📦 Проблема

1. Кажется, что это разные механизмы

На самом деле async/await использует Promise “под капотом”.

2. Код на .then() становится трудно читать

При длинных цепочках появляются вложенности и ухудшается читаемость.

✅ Решение

Использовать подход в зависимости от сложности задачи:

простые операции → .then()
сложная логика → async/await

💻 Код

Классический Promise:

fetch('/user.json')
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error(error);
  });

async/await:

async function fetchUser() {
  try {
    const response = await fetch('/user.json');
    const data = await response.json();
 
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}
 
fetchUser();

Под капотом это всё равно Promise:

async function getData() {
  return 123;
}
 
getData().then(result => console.log(result));

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

Ситуация	Лучше использовать
1–2 асинхронных вызова	`.then()`
Последовательность из нескольких операций	`async/await`
Условия, циклы, `try/catch`	`async/await`
Цепочки промисов без сложной логики	`.then()`

В современных React-проектах чаще используют async/await, так как такой код проще читать и поддерживать.

🎯 Вывод

async/await и Promise используют один механизм
async/await делает асинхронный код похожим на обычный синхронный
.then() подходит для коротких цепочек
для большинства современных проектов предпочтителен async/await

LETUNOFF DOCS

Навигация