使用Fetch API获取JSON数据并填充HTML表格时的Promise处理与数据解析问题

阿华AIGC实验室

2026-4-14

嗨，我明白你现在的困惑——刚接触JavaScript异步编程的时候，Promise确实容易让人绕晕，我来一步步帮你理清问题所在，然后给出可行的解决方案。

首先，你遇到的JSON.parse错误，核心原因是**get_data()这个async函数返回的不是JSON字符串，而是一个Promise对象**。你试图直接对Promise做JSON.parse，自然会报错，因为Promise根本不是合法的JSON格式。而且其实你完全不需要手动JSON.parse，response.json()方法已经帮你把服务器返回的JSON数据解析成JavaScript对象了。

咱们先拆解你代码里的几个问题：

get_data()是async函数，调用它得到的是Promise，必须用await或者.then()才能拿到里面的实际数据，不能直接赋值给变量就用。
你的JD函数只是发起了fetch请求，但没有在正确的时机处理返回的数据——异步操作的结果只能在回调里使用，不能直接指望全局变量jdata会自动变成数据。
你手动写的raw_data字符串能用，是因为它是同步的、现成的字符串，但真实的API请求是异步的，不会立刻返回结果。

接下来给你两种正确的写法，选你觉得顺手的就行：

方法一：用async/await（更直观的同步风格写法）

把获取数据和填充表格的逻辑放在一个async函数里，用await等待异步操作完成：

<script>
async function fetchAndFillTable() {
  try {
    // 第一步：发起请求，等待响应
    const response = await fetch('/api');
    // 第二步：把响应解析成JavaScript对象（不用手动JSON.parse！）
    const sensorData = await response.json();
    
    // 第三步：用解析好的数据填充表格字段
    document.getElementById("dane_temp").innerHTML = sensorData.temp;
    document.getElementById("dane_lux").innerHTML = sensorData.lux;
    document.getElementById("dane_pressure").innerHTML = sensorData.pressure;
    document.getElementById("dane_TVOC").innerHTML = sensorData.TVOC;
    document.getElementById("dane_hum").innerHTML = sensorData.hum;
    document.getElementById("dane_AQI").innerHTML = sensorData.AQI;
    document.getElementById("dane_eCO2").innerHTML = sensorData.eCO2;
    
    // 调试用：打印数据看看结构
    console.log('传感器数据:', sensorData);
  } catch (error) {
    // 处理请求失败或者解析出错的情况
    console.error('获取数据时出错了:', error);
  }
}

// 页面加载完成后自动调用函数
window.addEventListener('load', fetchAndFillTable);
</script>

方法二：用.then()链式调用（传统异步写法）

如果你更习惯链式回调的写法，也可以这样写，核心是在.then()里直接处理数据：

<script>
function fetchSensorData() {
  fetch('/api')
    // 先把响应解析成对象
    .then(response => response.json())
    // 拿到数据后填充表格
    .then(sensorData => {
      document.getElementById("dane_temp").innerHTML = sensorData.temp;
      document.getElementById("dane_lux").innerHTML = sensorData.lux;
      // 其他字段照着上面的格式加就行
      console.log('传感器数据:', sensorData);
    })
    // 捕获可能出现的错误
    .catch(error => console.error('请求失败:', error));
}

// 调用函数获取数据
fetchSensorData();
</script>

最后再给你划几个重点：

Promise是异步操作的容器：async函数返回的都是Promise，必须用await或者.then()才能取出里面的结果，不能直接当成普通变量用。
response.json()已经帮你解析好了：服务器返回的JSON字符串会被自动转换成JavaScript对象，不需要再手动调用JSON.parse。
异步操作的结果要在异步上下文里用：数据只能在await之后的代码，或者.then()的回调函数里使用，不能在同步代码里直接获取。
一定要加错误处理：用try/catch或者.catch()捕获请求失败、网络错误等情况，避免页面出现莫名其妙的报错。