承诺未兑现，未兑现

Question

尝试显示json中的数据。当我在控制台上运行我的功能时，它显示：

Promise｛｝和[[PromiseState]]："；满足">

但实际上并没有归还任何东西。

getJobs = async () => {
try{
response = await fetch("./data.json");
const data = await response.json();
return data;
} catch(error){
console.log('Error getting data', error)
}   
} 

renderJobs = async () => {
const jobs = await getJobs();
const view = `
<div class='card-company'>
${jobs.map(companyName => `
<p>${companyName.company}</p>
`).join('')}
</div>
`
return view
}

我在属性[[PromiseResult]]中有我需要的所有p标记，但在文档中没有显示。

我还没有找到这样的东西，如果这个片段中有什么需要改进的地方，我很感激你的反馈。

谢谢。

Answer 1

由于这些是async函数，您需要使用await来获得它们的最终返回值。

要记录HTML字符串，您可以使用console.log(await renderJobs());，无论您在代码中运行renderJobs()，都需要使用await来获取HTML字符串。

使用console.log(renderJobs());将返回您所描述的promise挂起消息，因为async函数返回的是promise，而不是promise的结果。使用await返回它所使用的承诺的已实现值。

Answer 2

在我看来这是一个不合适的模板。无论如何，我看不出它在这种情况下有什么用处。应该更像：

const M = tag=>document.createElement(tag);
const renderJobs = async () => {
const jobs = await getJobs(), frag = document.createDocumentFragment();
let d;
for(let o of jobs){
d =  M('div'); d.className = 'card-company'; d.textContent = o.company;
frag.appendChild(d);
}
// you could append frag here or return and append later
return frag;
}

Answer 3

试用

getJobs = () =>
new Promise((resolve) => {
fetch("./data.json").then((data) => {
resolve(data);
});
});
renderJobs = async () => {
const jobs = await getJobs();
const view = (
<div class="card-company">
${jobs.map((companyName) => <p>${companyName.company}</p>).join("")}
</div>
);
return view;
};

Answer 4

我看到了一个关于如何不处理错误的问题。您需要返回拒绝或抛出错误。否则，承诺将永远无法解决

getJobs = async () => {
try {
const response = await fetch('./data.json')
const data = await response.json()
return data
} catch (error) {
console.log('Error getting data', error)
return Promise.reject(error)
}
}
renderJobs = async () => {
let jobs = []
try {
jobs = await getJobs()
} catch(error) {
console.log('Error getting data', error)
}
const view = `
<div class='card-company'>
${jobs
.map(
(companyName) => `
<p>${companyName.company}</p>
`
)
.join('')}
</div>
`
return view
}