掌握Fetch API高级技巧需聚焦“请求—响应—流”三层结构：精准配置缓存（no-cache/force-cache/reload）、重定向（manual/error）、用clone()规避响应体读取冲突、结合AbortController实现超时/取消/重试，按场景细粒度控制credentials与mode。
掌握 Fetch API 的高级技巧，关键不在堆砌配置项，而在于理解它“请求—响应—流”的三层结构，并围绕真实场景做精准控制。下面几个方向最实用、最容易被忽略。
精准控制缓存与重定向行为
很多开发者只用默认缓存策略，结果在实时列表页看到旧数据，或在登录后跳转时反复重定向。其实只需两处微调：
-
缓存策略按需选：查用户资料用
no-cache（校验新鲜度），读公告用force-cache（离线也能展示），上传头像后刷新列表用reload（强制发新请求并更新缓存） -
重定向不盲目跟随：设置
redirect: 'manual'后，你可以自己判断response.redirected和response.url，避免被跳转到错误页面；敏感操作如支付回调，甚至可设redirect: 'error'直接中断跳转
正确处理响应体流，避开“Already read”陷阱
Response 对象的 body 是一个只读一次的流。调用过 response.json() 就不能再调用 response.text()，否则报错。解决方法不是“记住别重复调”，而是主动设计读取路径：
- 先用
response.clone()复制一份响应，分别解析不同格式：res.json()用于业务逻辑，res.clone().text()用于日志记录或错误调试 - 不确定返回类型时，先用
response.headers.get('content-type')判断：含application/json就走.json()，含text/就走.text()，是二进制就用.blob()
主动管理请求生命周期：超时、取消与重试
fetch 本身不支持超时，但可以结合 AbortController 实现精确控制：
- 设置 8 秒超时：
const controller = new AbortController(); setTimeout(() => controller.abort(), 8000); fetch(url, { signal: controller.signal }) - 页面切换或表单取消时，直接调用
controller.abort()，避免无用请求继续执行和内存泄漏 - 网络抖动场景下，可封装简易重试：捕获
AbortError或网络异常后，递归调用自身，最多重试 2 次，并加入指数退避（如第一次等 500ms，第二次等 1s）
跨域与凭证的细粒度控制
不要全局设 credentials: 'include'。应区分场景：
- 公开接口（如搜索建议）用
credentials: 'omit'，避免携带无关 Cookie，也防止 CORS 预检失败 - 登录态接口必须带凭证时，配合后端
Access-Control-Allow-Credentials: true和明确指定Access-Control-Allow-Origin（不能为*） - 开发环境联调时，若后端未配 CORS，可临时用
mode: 'no-cors'发请求——注意此时只能发简单请求（GET/POST/HEAD），且无法读响应，仅用于触发行为（如埋点上报）
