html无内置重试机制，需js通过onerror记录失败状态并控制对应资源重试；img用data-id/id绑定按钮，fetch应封装函数防重复请求，iframe靠load+contentdocument检测失败，重试须限次退避。
点击按钮触发图片/资源加载失败后的重试
HTML 本身没有内置“重试加载”机制，失败后必须靠 JavaScript 主动重新设置 src 或发起新请求。常见场景是 <img> 加载 404、跨域拒绝、网络中断等导致的 onerror 触发。
关键不是“加个按钮”，而是让按钮能精准控制对应资源的重试逻辑——否则容易点错元素、重复绑定、或重试了错误的 URL。
- 给目标元素（如
<img>）加唯一标识，比如data-id或直接用id，避免靠 DOM 顺序定位 - 在
onerror回调里记录失败状态，并启用对应重试按钮（disabled初始设为true） - 按钮点击时，不要只改
src，要先清空旧的src再赋新值（防止浏览器缓存旧失败响应） - 示例：
@@##@@<br><button id="retry-btn" disabled onclick="document.getElementById('avatar').src='/api/avatar.jpg?'+Date.now()">重试</button>
fetch 加载 JSON 失败后手动重试的最小可行写法
用 fetch 请求接口失败时，catch 只捕获网络级错误；HTTP 状态码如 404、500 需手动 response.ok 判断。重试按钮本质就是再次调用同一段 fetch 逻辑，但要注意避免闭包陷阱和重复点击。
- 把 fetch 封装成函数（如
loadData()），按钮onclick直接调用它，而不是内联写 fetch - 重试前禁用按钮，成功或失败后恢复，防止连点造成并发请求堆积
- 如果接口有防重放或需 token 刷新，重试前得先调用
refreshToken()，否则大概率再失败 - 示例中用
Date.now()做简单防缓存，实际建议用cache: 'no-cache'配置项
iframe 加载失败怎么知道？又怎么重试？
<iframe></iframe> 没有原生 onerror，只能靠监听 load 和定时检测 contentDocument 是否可读来间接判断失败。重试就是重新赋值 src，但要注意同源限制下才能访问子页面内容。
- 监听
load事件不等于加载成功——可能加载了个空白页或 200 HTML 错误页，得配合try/catch读contentDocument.body - 重试前清掉
src（设为空字符串），再设回原地址，否则某些浏览器不会触发新加载 - 非同源 iframe 无法判断内部是否真失败，此时只能依赖超时 + 用户点击重试，别试图读取其内容
- 不要用
location.reload()重试 iframe，那是刷新整个页面
重试次数限制和退避策略为什么不能省
没限制的重试等于 DDOS 自己的后端，尤其在接口返回 503 或网关超时时。用户点一次就发 5 轮请求，既浪费资源，又掩盖真实问题。
- 至少做基础计数：全局变量或元素
dataset.retryCount，超过 3 次就禁用按钮并提示“请稍后再试” - 首次失败后立即重试可以，第二次建议延迟 1s（
setTimeout），第三次延迟 3s，避免雪崩 - 如果后端返回了
Retry-Afterheader，优先按它的时间等待，而不是硬编码 - 所有重试逻辑必须可被取消（比如用户切换页面时清除 pending timeout），否则内存泄漏+报错乱飞
最常被忽略的是：重试按钮没和具体资源实例绑定，导致多个图片共用一个按钮，或者按钮点了却不知道该重试哪个 URL。绑定关系一旦松散，后面加监控、埋点、错误归因全会失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
