Promise 待处理，已完成未返回

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返回它所使用的 promise 的已完成值。

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

我发现您没有处理错误的方式存在问题。 您需要返回拒绝或抛出错误。 否则，promise 将永远无法解决

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
}