能否在for循环中使用JS fetch()？气象站传感器数据更新代码优化

重构后的代码 #

// 定义所有传感器的配置：请求参数和对应的HTML元素ID
const sensorConfigs = [
  { name: 'bme280', r: '1', elementId: 'bme280-1-rt1' },
  { name: 'bme280', r: '2', elementId: 'bme280-1-rt2' },
  { name: 'bme280', r: '3', elementId: 'bme280-1-rt3' },
  { name: 'ds18b20-1', r: '1', elementId: 'ds18b20-1-rt1' }
];

function updateReadings() {
  secondsSinceLastUpdate++; // 修正原代码的自增写法错误

  // 循环遍历所有传感器配置，发起请求
  sensorConfigs.forEach(config => {
    fetch(`reading?name=${config.name}&r=${config.r}`)
      .then(response => response.json())
      .then(data => {
        document.getElementById(config.elementId).innerHTML = data;
        secondsSinceLastUpdate = 0;
      })
      .catch(err => console.error(`获取${config.name}数据失败:`, err)); // 增加错误捕获，方便调试
  });
}

// 修正原代码的函数名拼写错误：updateReading → updateReadings
setInterval(updateReadings, 1000);

关键说明 #

• 配置数组统一管理：把每个传感器的请求参数、目标元素ID整合到数组中，后续新增传感器只需在数组里添加一行配置，无需重复复制代码块。
• 循环替代重复代码：用forEach遍历配置数组，一次性处理所有传感器的请求逻辑，代码更简洁易维护。
• 修复原代码问题：
  • 原代码中secondsSinceLastUpdate = secondsSinceLastUpdate++;是错误写法，直接使用secondsSinceLastUpdate++即可完成自增。
  • 原定时任务里的函数名拼写错误，修正后才能正常触发每秒更新。
• 新增错误处理：添加catch捕获请求失败的异常，避免请求出错后无任何提示，便于排查问题。

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