Почему на странице с детальным описанием возвращается promise, а не описание эпизода?
 

Здравствуйте!

Делаю учебный проект, который, используя общедоступный API, выводит списком и по отдельности описание эпизодов из Звездных войн. Столкнулся с тем, что на странице с детальным описанием эпизода, url которой на локальном компе выглядит как http://127.0.0.1:5500/index.html?episodeId=1, возвращается [object Promise], вместо по идее подготовленного в файле episode-details.js dom-элемента с описанием выбранного на главной странице эпизода киноэпопеи.
Кто-то может сказать почему возвращается promise вместо куска html? Приложил архив с проектом. Могу на сайт загрузить, если так будет понятнее смотреть код
P.S. API не быстрый, надо чуть подождать, когда запускаете index.html

Потому что в episode-details.js функция render определена как "анинхронная"

export async function render(data) {

То есть, вы ждете асинхронный "import", который возвращает "асинхронную функцию".

Добавьте функцию render также в цепочку промиса

function renderPage(moduleName, apiUrl, css){
  Promise.all([moduleName, apiUrl, css].map(src => loadResource(src)))
    .then(([pageModule, data]) => {
      return pageModule.render(data);
    })
    .then((result) => {
      appContainer.innerHTML = '';
      appContainer.append(result);
    });
}

ruslan_mart, спасибо!
Это наверно я перемудрил, добавив async с await в экспортируемую функцию. Может надо было как-то по другому добывать html-описание эпизода в episode-details.js?

borus, в целом, ничего плохого нет в текущем решении :) Иначе нормально и не получится сделать, если у вас асинхронные операции внутри render функции.

async/await - это синтаксический сахар над промисами, поэтому возвращается промис.

borus, можно поинтересоваться, какую роль выполняет cssPromis в коде main.js?