JavaScript Fetch API无输出排查：是否存在变量定义错误？

我帮你检查了代码，发现几个关键问题导致页面空白，咱们一个个来修复：

核心问题分析 #

• 未初始化DOM元素变量：你直接使用span和li但没有提前创建，这会触发Uncaught ReferenceError，直接中断后续代码执行。
• API返回结构错误：WordPress REST API的这个端点返回的是直接的帖子数组，不存在results属性，data.results会返回undefined，导致map方法无法执行。
• catch块未捕获错误信息：你的catch里仅写了console.log();，无法看到具体报错内容，调试完全无从下手。
• CSS语法错误：多个选择器的大括号未正确闭合，样式无法生效，即使JS正常运行也可能看不到内容。

修正后的完整代码 #

JavaScript代码

'use strict';
function createNode(element) { return document.createElement(element); }
function append(parent, el) { return parent.appendChild(el); }
var ul = document.getElementById('authors');
var url = 'http://vmaffluence.in/wp-json/wp/v2/posts/?category=website';

fetch(url)
  .then(function(resp) { return resp.json(); })
  .then(function(data) {
    // WordPress API直接返回帖子数组，无需访问results属性
    return data.map(function(post) {
      // 提前创建li和span元素，避免未定义错误
      var li = createNode('li');
      var span = createNode('span');
      span.innerHTML = post.id; // 从返回的帖子对象中获取ID
      append(li, span);
      append(ul, li);
    });
  })
  .catch(function(error) { 
    console.error('API调用出错:', error); // 打印具体错误信息，方便调试
  });

CSS代码（修复语法错误）

body { 
  background: green;
}
h1 { 
  text-align: center; 
  font-family: arial; 
  color: #5a5a5a; 
}
li { 
  display: block; 
  list-style: none; 
  flex-wrap: wrap; 
  align-items: flex-start; 
  justify-content: center; 
  flex-basis: 100%;
}
li { 
  flex-basis: 40%; 
  display: flex; 
  flex-direction: column; 
  margin-bottom: 20px; 
  align-items: center;
}
span { 
  font-family: arial; 
  font-size: 20px; 
  color: #5a5a5a; 
  text-align: center; 
}
img { 
  margin: 10px; 
  border-radius: 10px; 
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2); 
}

HTML结构（保持不变）

<h1>Checking API Codes</h1>
<ul id="authors"></ul>

关键修正说明 #

1. DOM元素初始化：在循环内每次创建新的li和span元素，确保变量定义后再使用。
2. API数据处理：直接遍历返回的data数组，匹配WordPress REST API的返回结构。
3. 错误调试优化：在catch块中使用console.error打印具体错误，快速定位问题。
4. CSS语法修复：给每个选择器添加正确的闭合大括号，保证样式正常渲染。

内容的提问来源于stack exchange，提问作者Vasanthamugi T VM AFFLUENCE