客户端JS无法解析Express返回的JSON，仅获取原始HTTP响应

你遇到的核心问题是客户端没有对fetch返回的响应进行JSON解析。fetch API默认返回的是Response对象（包含HTTP状态码、响应头等元数据），而非直接的响应体内容，必须显式调用.json()方法来解析JSON格式的响应体。

修复客户端代码 #

修改infiniteScroll.js中的fetchAndAppendTestimonials函数，在await fetch之后调用.json()完成解析：

async function fetchAndAppendTestimonials(limit = 5, after = 0) {
  const response = await fetch('/testimonials');
  // 解析响应体为JSON格式数据
  const testimonials = await response.json();
  console.log(testimonials); // 现在会打印实际的JSON数据内容
}
fetchAndAppendTestimonials(5, 0);

额外优化建议 #

1. 添加错误处理逻辑：增加HTTP状态码校验，避免解析失败时抛出未捕获异常：

async function fetchAndAppendTestimonials(limit = 5, after = 0) {
  try {
    const response = await fetch('/testimonials');
    if (!response.ok) {
      throw new Error(`请求失败！状态码：${response.status}`);
    }
    const testimonials = await response.json();
    console.log(testimonials);
  } catch (error) {
    console.error('获取数据出错:', error);
  }
}

2. 服务器端适配动态参数：当前/testimonials接口固定传入limit=5和after=10，可以改为从请求查询参数中获取值，适配客户端传入的参数：

// server.js中修改接口逻辑
app.get('/testimonials', async function (req, res) {
  const limit = parseInt(req.query.limit) || 5;
  const after = parseInt(req.query.after) || 0;
  const testimonials = await fetchTestimonials(limit, after);
  console.log(testimonials);
  res.json(testimonials);
});

同时客户端请求时带上对应参数：

// infiniteScroll.js中修改请求地址
const response = await fetch(`/testimonials?limit=${limit}&after=${after}`);

验证说明 #

你提到服务器端能正常获取响应，说明fetchTestimonials函数和res.json(testimonials)的逻辑都是正常的，问题完全出在客户端没有对fetch返回的响应体做JSON解析。

内容的提问来源于stack exchange，提问作者HalfWebDev