Почему Promise.all (..) передает нерешенные / ожидающие выполнения обещания в прикрепленном тогда обработчике?

Question

Я пытаюсь получить данные из двух API-интерфейсов параллельно, используя функции fetch API и Promise.all. Ожидается, что когда все обещания в данном массиве разрешены, выполняется обратный вызов в then. Но я получаю ожидающие обещания в функции обратного вызова.

Код функции используется для достижения требуемой цели

const fun = () => {
  const fetchPromises = [
    fetch('api-1'),
    fetch('api-2')
  ];

  Promise.all(fetchPromises)
    .then( responses => responses.map( res => res.json()))
    .then(result => {
      console.dir(result);
      // do something with results
    });
}

Я ожидаю, что функция обратного вызова then будет выполняться только тогда, когдаPromise.all разрешается, а Promise.all разрешается только тогда, когда разрешены также все обещанные в данном массиве. Таким образом, в функции обратного вызова второго then должен был быть получен массив ответов от API.

Однако в консоли я получаю следующий результат:

result
(2) [Promise, Promise]
  0: Promise
    [[PromiseStatus]]: "pending",
    [[PromiseValue]]: undefined
    __proto__: Promise
  1: Promise {<pending>}
  length: 2

т.е. нерешенные / ожидающие выполнения обещания передаются в качестве обратного вызова.

Я полагаю, что здесь, возможно, упущен важный момент, касающийся функциональности Promise.all. В чем причина такого поведения?

Answer 1

res.json также возвращает Обещание, поэтому responses.map( res => res.json()) возвращает массив Обещания, который вам нужно подождать

Вам необходимо использовать Promise.all около responses.map( res => res.json()) тоже

Promise.all(fetchPromises)
    .then( responses => Promise.all(responses.map( res => res.json())))
    .then(result => {
      console.dir(result);
      // do something with results
    });