Fetch本身不支持响应拦截器，但可通过封装自定义request函数实现：统一检查response.ok、解析JSON、校验业务code、处理401跳转、集成AbortController及超时控制。
JavaScript 中 Fetch 本身没有内置的“响应拦截器”机制，不像 Axios 那样提供 interceptors.response.use。但你可以通过封装一个自定义的 fetch 函数，在每次调用时统一处理响应逻辑，实现类似拦截器的效果。
封装统一的 fetch 请求函数
这是最常用、最可控的方式：用一个函数包裹原生 fetch，在 then（或 await）拿到响应后，插入公共处理逻辑（如鉴权失败跳转、错误提示、数据解包等）。
- 所有业务请求都调用这个封装函数，不直接使用原生
fetch - 响应处理放在
response.clone()后解析，避免消耗原始 body 流 - 可结合
async/await让逻辑更清晰
示例：
async function request(url, options = {}) {
const defaultOptions = {
headers: {
'Content-Type': 'application/json',
...options.headers,
},
...options,
};
try {
const res = await fetch(url, defaultOptions);
// ✅ 统一响应预处理：检查状态码、提取数据、错误分类
if (!res.ok) {
const errorData = await res.clone().json();
throw new Error(errorData.message || `HTTP ${res.status}`);
}
const data = await res.json();
// ✅ 统一数据结构处理（例如后端统一返回 { code: 0, data: ..., msg: '' }）
if (data.code !== 0) {
throw new Error(data.msg || '请求失败');
}
return data.data; // 只返回业务数据，屏蔽外层包装
} catch (err) {
// ✅ 统一错误上报或 UI 提示（如 toast）
console.error('请求异常:', err);
throw err;
}
}
处理鉴权失效（401/403）等需跳转场景
在响应处理中识别特定状态码或响应字段，触发登录态刷新或页面跳转，避免每个接口重复写判断。
立即学习“Java免费学习笔记（深入）”；
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- 检测
res.status === 401或响应体中code === 401 - 清除本地 token，重定向到登录页（注意避免循环跳转）
- 可配合全局事件或状态管理（如 Pinia / Redux）通知登录模块
增强示例片段：
if (res.status === 401) {
localStorage.removeItem('token');
window.location.href = '/login?redirect=' + encodeURIComponent(window.location.pathname);
throw new Error('登录已过期，请重新登录');
}
支持 AbortController 和超时控制
虽不属于“响应拦截”，但属于请求生命周期的统一管控，常与响应处理配合使用。
- 为每个请求自动注入
signal，支持取消 - 默认添加 10s 超时，超时后抛出明确错误（便于统一捕获）
- 超时错误可和网络错误、业务错误区分开，做不同提示
进阶：用 Proxy 拦截全局 fetch（不推荐生产）
可通过重写 window.fetch 并用 Proxy 包裹，实现无感拦截。但存在风险：
- 影响第三方库（如 Sentry、Analytics SDK）发起的 fetch
- 调试困难，容易引发不可预期行为
- 不符合模块化设计，难以按模块开关拦截逻辑
仅建议用于简单调试或脚手架工具链中，非核心业务逻辑。
