常见原因是事件监听未正确绑定或DOM未就绪；应将脚本置于</body>前或用DOMContentLoaded包裹，避免因元素未加载导致addEventListener报null错误，并检查按钮ID是否准确、是否动态插入需用事件委托。
点击按钮后页面没反应，fetch 调用不执行
常见原因是事件监听没绑对，或者 addEventListener 写在了 DOM 元素还没加载完成的位置。确保按钮存在后再绑定，最稳妥的方式是把 JS 放在 </body> 前，或用 DOMContentLoaded 包裹。
别写成这样：
document.getElementById('loadBtn').addEventListener('click', loadData); // 报错：null is not an object改成：
document.addEventListener('DOMContentLoaded', () => {
document.getElementById('loadBtn').addEventListener('click', loadData);
});- 检查控制台是否报
TypeError: Cannot read property 'addEventListener' of null，说明按钮元素没找到 - 确认按钮有唯一
id="loadBtn"，别漏写或拼错 - 如果按钮是后续 JS 动态插入的，要用事件委托，监听父容器并判断
event.target
fetch 返回数据但页面没更新，innerHTML 赋值无效
典型情况是服务端返回了 JSON，但你直接把它塞进了 innerHTML——JSON 对象不能当字符串用，会变成 [object Object]。
立即学习“前端免费学习笔记（深入）”；
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
正确做法是先 response.json() 解析，再拼接 HTML 字符串或操作 DOM：
async function loadData() {
const res = await fetch('/api/data');
const data = await res.json(); // 必须 await，否则 data 是 Promise
document.getElementById('result').innerHTML = data.items.map(item =>
`<div>${item.name}</div>`
).join('');
}- 忘记
await res.json()会导致data是 pending 状态，map报错 -
fetch默认不带凭据（如 cookie），跨域请求需加{ credentials: 'same-origin' } - 服务端返回非 2xx 状态码时，
fetch不抛错，要手动检查res.ok
重复点击按钮导致多次并发请求、数据错乱
用户手快连点几下，fetch 就发出去好几份，后到的响应可能覆盖先到的，UI 显示“旧数据”。这不是 bug，是预期行为，得主动防。
- 禁用按钮：
button.disabled = true，请求结束再恢复 - 取消上一次请求：用
AbortController，尤其适合搜索类场景 - 简单去重：加个 loading 标志位，函数开头判断
if (loading) return
示例：
let loading = false;
async function loadData() {
if (loading) return;
loading = true;
document.getElementById('loadBtn').disabled = true;
try {
const res = await fetch('/api/data');
const data = await res.json();
document.getElementById('result').innerHTML = /* ... */;
} finally {
loading = false;
document.getElementById('loadBtn').disabled = false;
}
}IE 下 fetch 报错 undefined，需要兼容老浏览器
fetch 在 IE 完全不支持，哪怕加了 polyfill（比如 whatwg-fetch），也得注意 Promise 同样要垫片。光引入 fetch polyfill 不够。
- 必须同时引入
Promisepolyfill（如 core-js 的core-js/stable/promise） - 若用 webpack，可通过
babel-preset-env自动注入所需 polyfill，但需配置targets包含 IE11 - 更轻量方案：改用
XMLHttpRequest，虽然啰嗦但无依赖，适合只兼容一两个老版本的场景
底线提醒：现代项目若明确不支持 IE，就别花时间垫片——但得在文档里写清楚，不然测试同学会半夜打电话问为什么按钮点不动。
