Этот твой getDetails возвращает промис, который резолвится массивом промисов. Оный массив не thenable, потому "окончательно резолвится" сразу. Соответственно, Promise.all, получая на вход массив завершенных промисов, тоже не будет чего-то ждать и вернет завершенный промис, значением которого будет
массив массивов промисов (находящихся в состоянии загрузки). И только внутри renderDetailsPage2 начинается "поштучная" работа с промисами загрузки и её реальное ожидание.
Переделать надо примерно так:
export function getDetails(apiUrl) {
return Promise.all(apiUrl.map(url => fetch(url).then(res => res.json())));
}
export function renderDetailsPage2(dataDetails, filmList) {
return dataDetails.forEach(detail => {
const filmItem = document.createElement('li');
filmItem.classList.add('list-group-item', 'd-flex', 'flex-column');
filmItem.textContent = detail.name;
filmList.append(filmItem);
})
}
Теперь getDetails возвращает промис, который резолвится не массивом промисов, а массивом результатов загрузки (т.е. не сразу, а когда все будут загружены).
Promise.all в функции render ждет резолва всех троих, и теперь уже значением его промиса будет
массив массивов результатов. Посему в renderDetailsPage2 уже не надо ждать никакого резолва, там в dataDetails - готовый массив значений.
Если что, не дебажил, могут быть мелкие ошибки, но в целом идея вроде бы верная.