Как выглядит в браузере объект написанный через Promise?

Как выглядит в браузере объект, написанный через Promise

Промисе (Promise) — это объект в JavaScript, который представляет результат асинхронной операции. Давайте разберём его структуру в браузере.

Что такое Promise

Promise — это объект, который может находиться в трёх состояниях:

// Создание Promise
const promise = new Promise((resolve, reject) => {
  setTimeout(() => resolve('Success!'), 1000);
});

console.log(promise);
// Promise { <pending> }  — состояние pending (ожидание)

Состояния Promise в браузере

1. Pending (Ожидание)

const promise = new Promise((resolve, reject) => {
  // Код выполняется, но результат ещё не готов
});

console.log(promise);
// Вывод в Chrome DevTools:
// Promise { <pending> }

Внутренняя структура (видна в DevTools):

Promise
├── [[PromiseState]]: "pending"
├── [[PromiseResult]]: undefined
└── [[PromiseFulfillmentHandler]]: [ ... ]

2. Fulfilled (Выполнено успешно)

const promise = Promise.resolve('Success!');

console.log(promise);
// Вывод в Chrome DevTools:
// Promise { 'Success!' }

Внутренняя структура:

Promise
├── [[PromiseState]]: "fulfilled"
├── [[PromiseResult]]: "Success!"
└── [[PromiseFulfillmentHandler]]: []

3. Rejected (Ошибка)

const promise = Promise.reject(new Error('Failed!'));

console.log(promise);
// Вывод в Chrome DevTools:
// Promise { <rejected> Error: Failed! }

Внутренняя структура:

Promise
├── [[PromiseState]]: "rejected"
├── [[PromiseResult]]: Error: Failed!
└── [[PromiseRejectionHandler]]: []

Полный пример с жизненным циклом

// 1. Promise создан (pending)
const promise = new Promise((resolve, reject) => {
  console.log(promise);  // Promise { <pending> }
  
  setTimeout(() => {
    resolve('Data loaded!');  // Меняет состояние на fulfilled
  }, 1000);
});

// 2. Привязываем обработчики
promise
  .then(result => {
    console.log(result);  // 'Data loaded!' — выполнится через 1 сек
  })
  .catch(error => {
    console.error(error);
  });

// 3. После выполнения
// Promise { 'Data loaded!' }

Как Promise выглядит в DevTools

Chrome DevTools (Console Tab):

> const p = new Promise(r => setTimeout(() => r('hello'), 1000))
← Promise {<pending>}

// Спустя секунду
> p
← Promise {"hello"}
  [[Prototype]]: Promise
  [[PromiseState]]: "fulfilled"
  [[PromiseResult]]: "hello"

Firefox DevTools:

> const p = Promise.resolve(42)
← Promise { <state>: "fulfilled", <value>: 42 }

Методы Promise и их возвращаемые значения

// Promise.resolve() возвращает fulfilled Promise
const p1 = Promise.resolve(42);
console.log(p1);
// Promise { 42 }

// Promise.reject() возвращает rejected Promise
const p2 = Promise.reject('Error');
console.log(p2);
// Promise { <rejected> "Error" }

// .then() возвращает новый Promise
const p3 = p1.then(value => value * 2);
console.log(p3);
// Promise { <pending> }  — затем Promise { 84 }

// .catch() возвращает новый Promise
const p4 = p2.catch(error => 'Handled');
console.log(p4);
// Promise { <pending> }  — затем Promise { "Handled" }

Promise.all() и Promise.race()

// Promise.all() возвращает Promise с массивом результатов
const p1 = Promise.resolve(1);
const p2 = Promise.resolve(2);
const p3 = Promise.resolve(3);

const all = Promise.all([p1, p2, p3]);
console.log(all);
// Promise { <pending> }  — затем Promise { [ 1, 2, 3 ] }

// Если один Promise rejected, весь all rejected
const mixed = Promise.all([p1, Promise.reject('Error'), p3]);
console.log(mixed);
// Promise { <pending> }  — затем Promise { <rejected> "Error" }

// Promise.race() возвращает первый результат
const race = Promise.race([p1, p2, p3]);
console.log(race);
// Promise { <pending> }  — затем Promise { 1 }  (самый быстрый)

Практический пример: Fetch API

// fetch() возвращает Promise
const promise = fetch('https://api.example.com/users');
console.log(promise);
// Promise { <pending> }

// После загрузки
promise.then(response => {
  console.log(promise);
  // Promise { Response }
  // [[PromiseResult]]: Response
  //   ├── status: 200
  //   ├── statusText: "OK"
  //   ├── body: ReadableStream
  //   └── ...
  
  return response.json();  // Возвращает новый Promise
})
.then(data => {
  console.log(data);
  // [{id: 1, name: "John"}, ...]
});

Async/Await (синтаксический сахар для Promise)

// async функция возвращает Promise
async function fetchUsers() {
  const response = await fetch('https://api.example.com/users');
  return response.json();
}

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

// После выполнения
// Promise { [ {id: 1, name: "John"}, ... ] }

Визуализация в DevTools

Раскрытый Promise:

Promise
▶ <state>: "fulfilled"
▶ <value>: Object
  ├── id: 1
  ├── name: "John"
  └── email: "john@example.com"

Rejected Promise:

Promise
▶ <state>: "rejected"
▶ <reason>: Error: Network request failed
  ├── message: "Network request failed"
  ├── stack: "Error: Network request failed\n  at ..."
  └── ...

Чеклист при работе с Promise

• Promise может быть в трёх состояниях: pending, fulfilled, rejected
• Состояние меняется только один раз
• .then() и .catch() возвращают новый Promise
• Promise.all() ждёт всех, или rejected если хоть один rejected
• Promise.race() возвращает первый результат
• async/await — это синтаксис для Promise
• Всегда обрабатывай ошибки (.catch или try/catch)

Вывод

Promise в браузере — это объект с внутренним состоянием, который представляет асинхронный результат. На собеседовании это показывает, что вы:

• Понимаете асинхронность в JavaScript
• Знаете внутреннее устройство Promise
• Можете отлаживать асинхронный код
• Используете Promise эффективно