如何檢查承諾是否已解決以及條件渲染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>