fetch()可做仪表盘数据加载，但必须加try/catch、loading状态、超时控制、空数据兜底、时间格式转换及跨域配置，否则易白屏崩溃。
直接用 fetch() 加载数据做仪表盘，行得通，但不加防护会频繁白屏、报错、图表崩溃——这不是 API 本身的问题，而是你没处理好边界。
fetch() 请求失败时页面直接卡死？必须加 try/catch 和 loading 状态
浏览器不会自动帮你兜住网络异常。没写错误捕获，fetch() 抛出 TypeError: Failed to fetch 或 401/404 就会让后续 JS 停摆，innerHTML 不更新、图表不渲染、状态栏不变化。
- 每次
fetch()前先设 loading：document.getElementById('cpuChart').parentElement.innerHTML = '加载中...' - 用
try/catch包住整个请求链，catch里至少写console.error(err)并插入错误提示 DOM - 别依赖
response.ok判定成功：Prometheus 返回 200 + 空data.result数组，response.ok仍是 true，但图表会因空数据崩掉 - 对 OpenWeatherMap、本地
/api/sensors这类外部源，超时要手动控制，fetch(url, { signal: AbortSignal.timeout(5000) })
时间戳格式错乱导致 Chart.js 图表空白？秒级转毫秒 + 判空是硬门槛
Prometheus 的 /api/v1/query_range 返回的 values 是 [[1734790200.123, "85.2"], ...] 这种秒级浮点数组，而 Chart.js 的 labels 要 Date 对象（毫秒精度），不转就全画在 1970 年。
- 转换必须写：
const ts = Math.floor(item[0] * 1000)，再传给new Date(ts) -
values可能是空数组或null，不能直接.map()，得先if (!Array.isArray(data.data.result[0]?.values)) return - OpenWeatherMap 的温度字段是开尔文，
data.main.temp - 273.15后记得Math.round()，否则显示 22.89999999999999 - 所有时间序列数据都建议加 fallback：当
values.length === 0，填入最近 1 小时的占位时间点，避免图表坐标轴塌缩
跨域（CORS）拦截、认证失败、401 Unauthorized？Header 和服务端配置一个都不能少
本地开发时 fetch('http://localhost:9090/api/v1/query') 被拦，不是前端代码错了，是 Prometheus 没配 cors_allowed_origins，或者你漏了 Authorization 头。
- Prometheus 配置文件里必须有：
cors_allowed_origins = ["http://localhost:8080"]（注意协议+端口要和你的 HTML 页面完全一致） - 如果 Prometheus 开了 Basic Auth，
fetch()必须带 header：headers: { 'Authorization': 'Basic ' + btoa('user:pass') } - 别用浏览器弹窗输密码——它触发的是 HTTP auth challenge，
fetch()不会等你输完，直接返回 401 - 本地调试可用
curl -H "Origin: http://localhost:8080" http://localhost:9090/api/v1/query快速验证 CORS 是否生效
图表初始化报错 “Chart is not defined” 或 canvas 找不到？CDN、id、执行时机三者强绑定
Chart.js 不是全局变量，也不是 HTML 自带能力。没引入、没挂 id、DOM 没就绪，任何一个环节断掉，new Chart(...) 就报错。
-
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>必须在标签之前，或加defer -
的id必须和 JS 里document.getElementById('cpuChart')完全一致，大小写敏感 - 初始化代码不能放在
里裸写，得包在DOMContentLoaded或$(document).ready()（如果用了 jQuery） - 环形图（doughnut）要压成仪表盘样式，
cutout: '70%'是关键参数，不是 CSS width；数据必须是数组，[value, 100 - value]，不能只传一个数字
最常被跳过的一步：每个 tab 切换后重新 fetch，但没人清掉上一次的 Chart 实例。Canvas 元素复用时，必须先调 chart.destroy()，否则内存泄漏、动画错乱、颜色叠加——这问题在树莓派这类内存小的设备上爆发得最快。
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
