JS. Async. Promise

🧱 Суть

Promise – это объект, который представляет результат асинхронной операции, который будет получен позже.

Проще: Promise = обещание, что результат появится в будущем.

У него есть два основных исхода:

resolve → операция успешно завершилась
reject → операция завершилась ошибкой

📦 Проблема

1. Асинхронные данные недоступны сразу

Обычное значение:

const x = 5;

Доступно сразу.

Promise:

const x = fetch('/user.json');

Результат появится позже.

2. Путают Promise и готовые данные

const data = fetch('/user.json');

data – это не ответ сервера, а Promise.

3. Не понимают роль await

const data = await fetch('/user.json');

await ждёт завершения Promise и получает результат.

✅ Решение

Разделять два состояния:

Promise → результат

До выполнения:

Promise { <pending> }

После выполнения:

данные

💻 Код

Создание Promise:

const fetchData = (): Promise<string> => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('✅ Данные получены!');
    }, 2000);
  });
};

Получение Promise:

const promise = fetchData();
 
console.log(promise);
// Promise { <pending> }

Получение результата:

const result = await fetchData();
 
console.log(result);
// ✅ Данные получены!

Promise в fetch

const response = await fetch('/user.json');
const data = await response.json();

Здесь:

fetch()
↓
Promise<Response>
 
response.json()
↓
Promise<Data>

Оба метода возвращают Promise.

async и Promise

Любая async-функция всегда возвращает Promise:

async function getData() {
  return 123;
}

Фактически:

getData();
// Promise<number>

Главное различие

Обычное значение	Promise
Доступно сразу	Появится позже
Можно использовать сразу	Нужно дождаться
`const x = 5`	`const x = fetch()`

🎯 Вывод

Promise хранит будущий результат асинхронной операции
resolve = успешно завершён
reject = ошибка
await получает результат из Promise
без await ты работаешь с самим Promise, а не с данными

LETUNOFF DOCS

Навигация