Промисы в JavaScript: от основ до сложных решений

Расширенные примеры и нестандартные сценарии

Ниже представлены более сложные примеры использования промисов, включая отмену запросов, последовательное выполнение с контролем потока и создание собственных промисов.

Пример 1: Отмена запроса с помощью AbortController и Promise.race

const controller = new AbortController();
const signal = controller.signal;

const fetchWithTimeout = (url, timeout = 5000) => {
  const timeoutPromise = new Promise((_, reject) =>
    setTimeout(() => reject(new Error('Timeout')), timeout)
  );
  const fetchPromise = fetch(url, { signal }).then(r => r.json());
  return Promise.race([fetchPromise, timeoutPromise])
    .finally(() => controller.abort()); // отменяем запрос в любом случае
};

try {
  const data = await fetchWithTimeout('https://api.example.com/slow', 3000);
  console.log(data);
} catch (err) {
  console.error('Ошибка или таймаут:', err.message);
}

Ошибка или таймаут: Timeout

Объяснение: Используется AbortController для отмены fetch-запроса. Promise.race определяет, какое событие наступит раньше. .finally() вызывает отмену после завершения любого из промисов, чтобы не расходовать ресурсы.

Пример 2: Последовательное выполнение с ограничением параллелизма

async function asyncPool(concurrency, items, iteratorFn) {
  const executing = new Set();
  const results = [];
  for (const [index, item] of items.entries()) {
    const p = Promise.resolve().then(() => iteratorFn(item, index));
    results.push(p);
    executing.add(p);
    const clean = () => executing.delete(p);
    p.then(clean, clean);
    if (executing.size >= concurrency) {
      await Promise.race(executing);
    }
  }
  return Promise.all(results);
}

// Использование:
const urls = ['url1', 'url2', 'url3', 'url4'];
const fetchData = async (url) => {
  const res = await fetch(url);
  return res.json();
};
const data = await asyncPool(2, urls, fetchData);
console.log(data);

[массив результатов в порядке urls]

Объяснение: Функция asyncPool поддерживает пул одновременно выполняемых промисов. Когда количество текущих промисов достигает лимита, ожидается завершение хотя бы одного из них. После этого запускается следующий. Это помогает избежать перегрузки сети или сервера.

Пример 3: Создание промиса с кастомной логикой повтора (retry)

function fetchWithRetry(url, options = {}, retries = 3) {
  return new Promise((resolve, reject) => {
    const attempt = (n) => {
      fetch(url, options)
        .then(response => {
          if (!response.ok) throw new Error('HTTP error ' + response.status);
          return response.json();
        })
        .then(resolve)
        .catch(err => {
          if (n > 0) {
            console.log(`Попытка ${retries - n + 1} не удалась. Повтор...`);
            setTimeout(() => attempt(n - 1), 1000);
          } else {
            reject(err);
          }
        });
    };
    attempt(retries);
  });
}

// Использование:
fetchWithRetry('https://unstable.example.com', {}, 5)
  .then(data => console.log('Данные получены:', data))
  .catch(err => console.error('Не удалось загрузить после всех попыток:', err));

Попытка 1 не удалась. Повтор...
Попытка 2 не удалась. Повтор...
Данные получены: {...}

Этот паттерн полезен при работе с ненадежными сетевыми соединениями. setTimeout вводит задержку перед повторной попыткой, чтобы не перегружать сервер.

Пример 4: Комбинация Promise.allSettled и обработка частичных результатов

const promises = [
  fetch('/user/1').then(r => r.json()),
  fetch('/user/2').then(r => r.json()),
  fetch('/user/3').then(r => r.json())
];

const settled = await Promise.allSettled(promises);
const successful = settled.filter(r => r.status === 'fulfilled').map(r => r.value);
const failed = settled.filter(r => r.status === 'rejected').map(r => r.reason);

console.log('Успешные:', successful);
console.log('Ошибки:', failed);

Успешные: [ { id: 1, name: 'Alice' }, { id: 2, name: 'Bob' } ]
Ошибки: [ Error: 404 Not Found ]

Позволяет обработать частичный успех, не теряя данные из-за одного отказа.

Пример 5: Промис с возможностью отмены через внешний триггер

function cancellablePromise(executor) {
  let cancel;
  const promise = new Promise((resolve, reject) => {
    cancel = reject;
    executor(resolve, reject);
  });
  return { promise, cancel: () => cancel(new Error('Cancelled')) };
}

const { promise, cancel } = cancellablePromise((resolve) => {
  setTimeout(() => resolve('Готово'), 5000);
});

// Через 2 секунды отменим
setTimeout(() => cancel(), 2000);

promise
  .then(console.log)
  .catch(err => console.error('Промис отменён:', err.message));

Промис отменён: Cancelled

Такой подход может быть полезен при реализации таймеров или запросов, которые нужно прерывать по пользовательскому действию.