功能

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的try块中进行ProjectsHTML()，但还是没有运气。

Image of web issue

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)

让我知道这是否有帮助。

异步/等待无法正常工作，我不明白为什么

2 个答案:

功能

致电