Как проверить, выполнено ли обещание и условно отрендерить Javascript?

Question

Моя цель состоит в том, чтобы визуализировать пользовательский интерфейс «обновление» в режиме реального времени, который указывает для каждой службы, которая была разрешена и которая все еще ожидает обработки, и отображает пользовательский интерфейс «результаты» обновления в режиме реального времени, который указывает для каждой службы.

В настоящее время у меня есть этот код, который заключает в асинхронные службы данных, называемые службами

const returnValues = [
    "Hakuna",
    "Matata",
    "It means",
    "No worries",
    "For the rest of your days"
].sort(() => (Math.random() > 0.5 ? 1 : -1));
const createService = (retVal, index) => () =>
    new Promise(resolve =>
        setTimeout(() => {
            console.log(`${index}. ${retVal}`);
            resolve(retVal);
        }, 
        Math.random() * 10000)
    );
const services = returnValues.map(createService);

Я хочу условно, сделать HTML-шаблон, который будет указывать, был ли текст разрешен или нет

Answer 1

Не на 100% ясно, какими должны быть все взаимодействия с пользовательским интерфейсом, но что-то вроде следующего может помочь вам в этом

const returnValues = [
  "Hakuna",
  "Matata",
  "It means",
  "No worries",
  "For the rest of your days"
].sort(() => (Math.random() > 0.5 ? 1 : -1));

const list = document.querySelector('#list');

const li =(txt)=>{
   const li = document.createElement('li');
   li.textContent = txt;
   return li
}


const createService = (retVal, index) => {
  const el = li(`${index+1} Pending...`);
  list.appendChild(el);
  return new Promise(resolve => {
    setTimeout(() => {     
      resolve(retVal);
    }, Math.random() * 5000)
  }).then(retVal=> {  el.textContent = `${retVal} ...Done`; return retVal})

};
const services = returnValues.map(createService);

Promise.all(services).then((allRetVals)=> list.appendChild(li('ALL DONE!')))

<ul id="list">

</ul>