求助：调用API后HTML页面出现‘undefined’文本的原因排查及解决方案建议

安全阿岳

2026-4-30

为什么页面会出现‘undefined’？

嘿，我一眼就揪出问题啦！你代码里的output变量只做了声明但没初始化，它的默认值是undefined——当你第一次执行output += ...的时候，就相当于把undefined和后面的HTML字符串硬拼在了一起，这就是页面上莫名出现‘undefined’的根源！

修复方法

只需要把let output;改成let output = '';（初始化为空字符串）就行啦，修改后的完整代码如下：

// Load list of blog posts
window.onload = function() {
 fetch('https://jsonplaceholder.typicode.com/posts?userId=1')
 .then((response) => response.json())
 .then((posts) => {
 let output = ''; // 这里初始化空字符串，避免拼接undefined
 posts.forEach(function(post) {
 output += `
 <li class="post">
 <h2><a href="#" target="_blank">${post.title}</a></h2>
 <p>${post.body}</p>
 </li>
 `
 });
 document.querySelector('#posts').innerHTML = output;
 });
};

给API新手的小建议

别忘了处理请求错误：fetch只会在网络彻底失败时触发reject，所以最好手动检查响应状态，避免拿到无效数据：

.then((response) => {
  if (!response.ok) {
    throw new Error(`请求失败！状态码: ${response.status}`);
  }
  return response.json();
})
.catch(error => console.error('获取数据出错:', error));

更简洁的字符串生成方式：可以用map方法生成HTML片段数组，再用join拼接，比forEach手动累加更清爽：

const output = posts.map(post => `
  <li class="post">
    <h2><a href="#" target="_blank">${post.title}</a></h2>
    <p>${post.body}</p>
  </li>
`).join('');