Промисы (Promise)

Промисы — это элегантное решение callback hell. Вместо бесконечных вложенных функций, вы работаете с «обещаниями» — объектами, которые представляют будущий результат асинхронной операции. Понимание промисов — ключ к современному JavaScript.

🤝 Promise — объект-обещание

Представьте, что вы заказали пиццу. Вам дали чек — это «обещание» (promise), что пицца будет. Пока пицца готовится, вы можете делать другие дела. Когда приготовят — вам скажут «выполнено» и отдадут пиццу. Если что-то пошло не так — скажут «ошибка».

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

🏗️ Создаём Promise

new Promise((resolve, reject) => { ... }) — конструктор промиса. Он принимает функцию-исполнитель (executor), которая выполняется сразу. Внутри вы должны вызвать либо resolve(значение) при успехе, либо reject(ошибка) при неудаче.

// Простой промис — эмулируем загрузку данных
const myPromise = new Promise((resolve, reject) => {
  // Имитируем задержку в 1 секунду (как запрос к серверу)
  setTimeout(() => {
    const success = true; // представим, что загрузка успешна

    if (success) {
      resolve('Данные загружены!'); // выполнен успешно
    } else {
      reject(new Error('Ошибка загрузки!')); // завершён с ошибкой
    }
  }, 1000);
});

console.log(myPromise); // Promise { <pending> } — пока ждёт

⛓️ .then(), .catch(), .finally()

Чтобы работать с результатом промиса, используют методы .then(), .catch() и .finally(). Они возвращают новые промисы — поэтому их можно цеплять в цепочку.

myPromise
  .then((result) => {
    // Успех: result = 'Данные загружены!'
    console.log('Успех:', result);
    return result.toUpperCase(); // можем вернуть новое значение
  })
  .then((upperResult) => {
    // Получили результат из предыдущего .then()
    console.log('В верхнем регистре:', upperResult);
  })
  .catch((error) => {
    // Обрабатываем ошибку — catch ловит ошибки со ВСЕЙ цепочки
    console.error('Ошибка:', error.message);
  })
  .finally(() => {
    // Выполнится ВСЕГДА — и при успехе, и при ошибке
    console.log('Промис завершён (скрываем лоадер)');
  });

🏁 Promise.all() и Promise.race()

Иногда нужно запустить несколько асинхронных операций одновременно. Для этого есть статические методы:

// Promise.all — ждёт ВСЕ промисы
// Если хоть один отклонён — весь Promise.all отклоняется
const p1 = fetch('/api/users');
const p2 = fetch('/api/products');
const p3 = fetch('/api/orders');

Promise.all([p1, p2, p3])
  .then(([users, products, orders]) => {
    console.log('Все данные загружены');
  })
  .catch(err => console.error('Один из запросов упал:', err));

// Promise.race — ждёт ПЕРВЫЙ завершённый промис
// Побеждает тот, кто ответил быстрее
Promise.race([
  fetch('/api/fast'),
  fetch('/api/slow')
]).then(result => {
  console.log('Первый ответ:', result);
});

✅ Итоги урока

• Promise — объект-обещание с тремя состояниями: pending, fulfilled, rejected
• new Promise((resolve, reject) => {...}) — создание промиса
• resolve(value) — успешное завершение, reject(error) — ошибка
• .then(fn) — обработка успеха, .catch(fn) — обработка ошибки
• .finally(fn) — выполнится всегда независимо от результата
• Промисы можно цеплять в цепочку — каждый .then() возвращает новый промис
• Promise.all([]) — ждёт все промисы, Promise.race([]) — ждёт первый