Javascript 获取异步/等待数据并以html显示/返回

我是新的异步/等待获取。下面是我的HTML代码

  <div id="content">
    <!-- Data will appear here as list -->
  </div>

---

如何在使用vanilla JS异步/等待获取我的数据后将数据显示为列表。

您可以执行以下操作：

function loadData() {
  const element = document.getElementById("content");
  getTemplate(element);
}

function getTemplate(element) {
  .....

  getPosts().then(data => {
     console.log(data));
     element.innerHTML = data;
  })
};

你应该

标记

getPosts（）

，

loadData（）

和

getTemplate（）

一个

async

函数

然后返回wait wait getPosts（）

最后，在

loadData（）

中，您

等待getTemplate（）

---

如果稍微重新组织代码不是问题，请尝试以下操作。关于如何返回，请记住，异步函数返回一个承诺，并且您必须在上下文中工作，因此我得到了调用

getPosts

的响应承诺，并使用数据得到了模板，然后在内容中给出

函数loadData（）{
const元素=document.querySelector（“div#content”）；
getPosts（）。然后（posts=>{
const-template=getTemplate（posts）；
element.innerHTML=模板；
});
}
异步函数getPosts（）{
常量url=”https://jsonplaceholder.typicode.com/posts";
const response=等待获取（url）；
return wait response.json（）；
}
函数getTemplate（posts）{
const rows=posts.map（postToRowView）.join（“”）；
返回`
标题
身体
${rows}
`;
}
功能postToRowView（post）{
返回`
${post.title}
${post.body}
`;
}
loadData（）
getTemplate的结果是异步的，因此它返回一个承诺-因此
element.innerHTML=getTemplate（）
将始终导致
元素。innerHTML
成为转换为字符串的承诺。。。i、 e.
[对象对象]
。。无论您做什么，当涉及异步时，您都无法获得同步结果。您需要更改
loadData
，以便它尊重异步，并等待承诺。最简单的解决方案是
function loadData（）{const element=document.getElementById（“content”）；element.innerHTML=wait getPosts（）；}
，但也可以使用
getPosts（）。然后（data=>{element.innerHTML=data；}）
function loadData() {
  const element = document.getElementById("content");
  getTemplate(element);
}

function getTemplate(element) {
  .....

  getPosts().then(data => {
     console.log(data));
     element.innerHTML = data;
  })
};