Question

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

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

下面是我的普通JS代码

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

function getTemplate() {
  async function getPosts() {
    try {
      const url = "https://jsonplaceholder.typicode.com/posts";
      const response = await fetch(url);
      console.log(response);

      if (response.ok) {
        const res = await response.json();
        return res;
      } else {
        throw new Error(response.statusText);
      }
    } catch (error) {
      return error;
    }
  }

  getPosts().then(data => console.log(data));

  //How I return data from here so it will update in the DOM

};

loadData();

如何在异步/等待后使用香草JS获取数据作为列表显示数据。

Answer 1

如果重新组织代码不是问题，请尝试以下操作。关于如何返回，请记住异步函数会返回一个promise，并且您必须在上下文中工作，因此我得到了响应的承诺，以调用getPosts，并使用数据获取了模板，然后在#content < / p>

function loadData() {
  const element = document.querySelector("div#content");

  getPosts().then(posts => {
    const template = getTemplate(posts);

    element.innerHTML = template;
  });
}

async function getPosts() {
  const url = "https://jsonplaceholder.typicode.com/posts";
  const response = await fetch(url);

  return await response.json();
}

function getTemplate(posts) {
  const rows = posts.map(postToRowView).join("");

  return `<table>
    <thead>
      <tr>
        <th>Title</th>
        <th>Body</th>
      </tr>
    </thead>

    <tbody>${rows}</tbody>
  </table>`;
}

function postToRowView(post) {
  return `<t>
    <td>${post.title}</td>
    <td>${post.body}</td>
  </tr>`;
}

loadData();

<div id="content"></div>

Answer 2

您可以执行以下操作：

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

function getTemplate(element) {
  .....

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

Answer 3

您应该

将getPosts()，loadData()和getTemplate()标记为async函数
然后return await getPosts()
最后，在loadData()中，您await getTemplate()

提取异步/等待数据，它们以html显示/返回

3 个答案: