async / await не работает, и я не понимаю, почему

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)

Дайте мне знать, если это поможет.