为何从服务器发送至浏览器的JSON数据为undefined？——使用fetch()请求服务器数据异常排查求助

嘿，我立刻发现了问题的关键所在！你的fetch调用里，第一个.then()方法没有返回response.json()的结果，这导致Promise链传递中断，第二个.then()自然接收到undefined。

核心原因 #

response.json()方法返回的是一个Promise对象，它会异步解析响应体为JSON数据。在Promise链中，每个.then()必须返回一个值（或Promise），才能把结果传递给下一个.then()。你原来的代码里只是调用了response.json()，但没有将其返回，所以第一个.then()的返回值默认是undefined，第二个.then()的参数myJson就变成了undefined。

另外还有个小细节：请求头里的"accept": "application / json"多了个空格，应该写成"application/json"，虽然这不一定是当前问题的直接诱因，但规范的MIME类型能避免潜在的解析异常。

修正后的代码 #

button.addEventListener('click', () => {
  fetch('/game-data', { 
    headers: { 
      "accept": "application/json", // 去掉空格
      "Content-Type": "application/json" 
    } 
  })
  .then(response => {
    console.log(response)
    // 关键：返回response.json()的Promise
    return response.json()
  })
  .then(myJson => {
    console.log(myJson) // 现在会输出 { data: "test-data" }
  })
  // 建议加上错误处理，避免请求失败时没有反馈
  .catch(error => {
    console.error('请求出错:', error)
  })
})

额外建议 #

加上.catch()来捕获请求过程中可能出现的错误（比如网络故障、服务器错误等），这样能让你的代码更健壮，也方便排查其他潜在问题。

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