Блог

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

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

 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-шаблон, который будет указывать, был ли текст разрешен или нет

Не на 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>