如何检查承诺是否已解析并有条件地渲染Javascript

Question

我的目标是呈现一个实时更新的"状态"UI，该UI指示每个已解决且仍处于挂起状态的服务，并呈现一个实时更新的"结果"UI，指示每个服务。

目前我有这段代码，它囚禁称为服务的异步数据服务

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% 清楚所有 UI 交互应该是什么，但类似以下内容可能会对您有所帮助

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>