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

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);
  }
}

The first function, projectHTML() , is being called from another file. I am able to return the value from function gethelp() , ProjectsHTML() . I can even log it in the console and indeed see it's correct. However, it won't load up into the template literal that I have. Please, someone lend a hand. I tried doing async...await in try blocks in ProjectsHTML() and still no luck.

Image of web issue

Answer 1

Function

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);
  }
}

Call

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

Answer 2

You need to modify your code like following:

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>`;
};

If I am not wrong above function is an event handler and you are using passing it in your html . If not, and you are calling it from another function, you need to use await while calling this function:

await projectHtml(e)

Let me know if this helps.