Есть два параллельных запроса: один возвращает A, другой B. Как получить их результаты и объединить A и B, если нельзя использовать Promise.all?

Question

Для объединения результатов двух параллельных запросов без Promise.all можно использовать: счетчик завершения, async/await с отдельными await, Promise.race для контроля времени, или ручное создание промисов с отслеживанием состояния. Также подходят библиотеки как RxJS или кастомная реализация механизма ожидания.

YeaHub · Accepted Answer

Альтернативы Promise.all для параллельных запросовКогда Promise.all недоступен, есть несколько способов协调 выполнения параллельных асинхронных операций.1. Счетчик завершенияjavascriptfunction combineRequestsWithoutPromiseAll(requestA, requestB) {
  return new Promise((resolve, reject) => {
    let results = {};
    let completed = 0;
    let hasError = false;

function checkCompletion() {
      completed++;
      if (completed === 2 && !hasError) {
        resolve(results);
      }
    }

requestA()
      .then(resultA => {
        results.A = resultA;
        checkCompletion();
      })
      .catch(error => {
        if (!hasError) {
          hasError = true;
          reject(error);
        }
      });

requestB()
      .then(resultB => {
        results.B = resultB;
        checkCompletion();
      })
      .catch(error => {
        if (!hasError) {
          hasError = true;
          reject(error);
        }
      });
  });
}

// Использование
combineRequestsWithoutPromiseAll(fetchA, fetchB)
  .then(({ A, B }) => {
    console.log('Результаты:', A, B);
  })
  .catch(error => {
    console.error('Ошибка:', error);
  });2. Async/await с отдельными awaitjavascriptasync function combineWithAsyncAwait() {
  try {
    // Запускаем оба запроса параллельно
    const promiseA = fetchA();
    const promiseB = fetchB();
    
    // Ждем результаты по отдельности
    const resultA = await promiseA;
    const resultB = await promiseB;
    
    return { A: resultA, B: resultB };
  } catch (error) {
    console.error('Ошибка в одном из запросов:', error);
    throw error;
  }
}3. Массив промисов с ручной обработкойjavascriptfunction customPromiseAll(promises) {
  return new Promise((resolve, reject) => {
    const results = [];
    let completed = 0;
    
    promises.forEach((promise, index) => {
      promise
        .then(result => {
          results[index] = result;
          completed++;
          
          if (completed === promises.length) {
            resolve(results);
          }
        })
        .catch(error => {
          reject(error);
        });
    });
  });
}

// Для двух запросов
customPromiseAll([fetchA(), fetchB()])
  .then(([resultA, resultB]) => {
    console.log('Объединенный результат:', { A: resultA, B: resultB });
  });4. Использование Promise.race для таймаутовjavascriptasync function combineWithRace() {
  const promiseA = fetchA();
  const promiseB = fetchB();
  
  // Создаем таймаут для контроля времени выполнения
  const timeout = new Promise((_, reject) => 
    setTimeout(() => reject(new Error('Timeout')), 5000)
  );
  
  // Ждем завершения всех или таймаут
  const resultA = await Promise.race([promiseA, timeout]);
  const resultB = await Promise.race([promiseB, timeout]);
  
  return { A: resultA, B: resultB };
}5. Объект с состояниемjavascriptclass RequestCombiner {
  constructor() {
    this.results = {};
    this.pending = new Set();
  }
  
  addRequest(key, promise) {
    this.pending.add(key);
    
    return promise
      .then(result => {
        this.results[key] = result;
        this.pending.delete(key);
        return this.checkAllDone();
      })
      .catch(error => {
        this.pending.delete(key);
        throw error;
      });
  }
  
  checkAllDone() {
    if (this.pending.size === 0) {
      return { ...this.results };
    }
    return null;
  }
}

// Использование
const combiner = new RequestCombiner();

combiner.addRequest('A', fetchA());
combiner.addRequest('B', fetchB())
  .then(combinedResult => {
    if (combinedResult) {
      console.log('Все запросы завершены:', combinedResult);
    }
  });6. RxJS для реактивного подходаjavascriptimport { forkJoin, from } from 'rxjs';

// Преобразуем промисы в Observable
const observableA = from(fetchA());
const observableB = from(fetchB());

forkJoin([observableA, observableB]).subscribe({
  next: ([resultA, resultB]) => {
    console.log('Результаты:', { A: resultA, B: resultB });
  },
  error: error => {
    console.error('Ошибка:', error);
  }
});Сравнение подходовСчетчик завершения - простой, но много boilerplate кодаAsync/await - чистый и читаемый, но требует современный JavaScriptКастомная реализация - гибкая, можно добавить дополнительную логикуRxJS - мощный, но требует дополнительной зависимостиВывод: Без Promise.all можно использовать различные паттерны для координации параллельных запросов, от простого счетчика завершения до более сложных реактивных подходов. Выбор зависит от требований проекта и доступных инструментов.