原生JavaScript Fetch实现服务端到客户端数据传输问题求助

你当前的客户端代码中，fetch返回的res是Response对象，它仅包含请求的状态码、响应头这类元数据，并没有自动解析服务端返回的JSON内容，所以看不到实际的返回信息。要拿到服务端的数据，需要调用res.json()方法解析响应体，这是一个异步操作，需要通过额外的.then()来处理。

修改后的客户端代码 #

<html lang="en">
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>prueba</title>
</head>

  <body>
   <button type="submit" id="upload">received information</button>
   <script>
     const submitButton = document.getElementById("upload");

     submitButton.addEventListener("click", (event) => {
       event.preventDefault();

       fetch("http://localhost:8000/", {
         method: "GET",
         })
         .then((res) => {
           // 解析服务端返回的JSON格式响应体
           return res.json();
         })
         .then((data) => {
           // 此处可获取到服务端返回的具体数据
           console.log("返回的数据:", data);
           console.log("消息内容:", data.message);
        })
        .catch((err) => {
          // 捕获请求或解析过程中出现的错误
          console.error("请求错误:", err);
        });
      });
   </script>
  </body> 
 </html>

关键说明 #

• res.json()会将服务端返回的JSON字符串转换为JavaScript对象，该方法返回Promise，因此需要用另一个.then()接收解析后的数据。
• 新增的.catch()可以捕获请求失败、响应体解析错误等异常情况，便于排查问题。

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