javascript - 异步/等待不工作，我不明白为什么

Question

function projectHTML(e) {
  let proj = await getProject(e.srcElement.dataset.id);
  console.log(proj);
  return `
    <div id="Project">
      <h1>${proj.name}</h1>
      <p>Description: ${proj.description}</p>
    </div>
  `;
}

async function getProject(id) {
  try {
    let res = await fetch(`http://127.0.0.1:5000/api/projects/${id}`);
    res = await res.json();
    return res;
  } catch (e) {
    console.error(e);
  }
}

第一个函数 ,projectHTML()正在从另一个文件中调用。我能够从函数返回值gethelp()，ProjectsHTML()。我什至可以将它登录到控制台中，并且确实看到它是正确的。但是，它不会加载到我拥有的模板文字中。请有人帮忙。我尝试async...await在尝试块中做ProjectsHTML()，但仍然没有运气。

网络问题的图像

Answer 1

功能

async function getProject(id) {
  try {
    const res = await fetch(`http://127.0.0.1:5000/api/projects/${id}`);
    return res.json();
  } catch (e) {
    console.error(e);
  }
}

称呼

getProject(id).then((data) => { 
  console.log(data) 
})

Answer 2

您需要修改您的代码，如下所示：

async function projectHTML(e) {

let proj = await getProject(e.srcElement.dataset.id);
console.log(proj)
return `<div id="Project">
            <h1>${proj.name}</h1>
            <p>Description: ${proj.description}</p>
        </div>`;
};

如果我没有错，上面的函数是一个事件处理程序，并且您正在使用将它传递给html. 如果不是，并且您正在从另一个函数调用它，则需要await在调用此函数时使用：

await projectHtml(e)

让我知道这是否有帮助。