使用JavaScript从API获取数据并渲染到DIV的问题求助

嘿，我来帮你捋捋这个问题～你现在遇到的问题主要是异步代码的执行顺序和变量作用域的问题，还有数据渲染的方式不对，咱们一步步来解决：

首先看你写的代码，问题出在这几点：

1. 你把i = json和DOM操作放在了.then()回调的外面，可fetch是异步操作啊！.then()里的代码会在API请求完成后才执行，但外面的代码会先跑，这时候json还没拿到值，i自然也是空的，DOM操作当然没用。
2. 就算拿到了json，直接调用toString()处理数组/对象，结果会是[object Object]这种完全不可读的内容，肯定不是你想要的效果。

那怎么改呢？给你两种可行的写法：

写法一：修正.then()的回调逻辑 #

把所有处理数据和DOM渲染的代码都放进第二个.then()里，确保拿到数据后再执行：

function fetchData() {
  fetch('https://jsonplaceholder.typicode.com/posts/1/comments')
    .then((response) => response.json())
    .then((json) => {
      console.log(json);
      // 把数据转换成可读性强的字符串格式，加缩进更友好
      document.getElementById('matcher').innerHTML = JSON.stringify(json, null, 2);
    })
    .catch((error) => {
      // 别忘了加错误处理，万一请求失败也能知道原因
      console.error('请求出错啦:', error);
      document.getElementById('matcher').innerHTML = '数据加载失败，请稍后重试';
    });
}

写法二：用async/await让代码更简洁 #

既然你已经声明了async函数，不如直接用await来处理异步，代码逻辑会更清晰：

async function fetchData() {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts/1/comments');
    const json = await response.json();
    console.log(json);
    // 如果想把数据渲染成更美观的HTML列表，而不是纯字符串，可以这样做
    const commentList = json.map(comment => `
      <div class="comment">
        <h4>${comment.name}</h4>
        <p>${comment.body}</p>
        <small>来自：${comment.email}</small>
      </div>
    `).join('');
    document.getElementById('matcher').innerHTML = commentList;
  } catch (error) {
    console.error('请求出错啦:', error);
    document.getElementById('matcher').innerHTML = '数据加载失败，请稍后重试';
  }
}

第二种写法里我还加了把评论数据渲染成HTML卡片的例子，比纯字符串好看多了，你可以根据自己的需求调整样式～

最后别忘了调用fetchData()函数哦，不然代码不会执行哒！

备注：内容来源于stack exchange，提问作者karen