JavaScript原生fetch不支持全局拦截器，但可通过封装myFetch函数模拟：请求前添加headers、拼接baseURL，响应后统一解析JSON、处理错误状态，支持拦截器链式调用与AbortController超时控制。
JavaScript 原生 fetch 本身不支持全局请求/响应拦截器（不像 Axios 有 interceptors），但可以通过封装一个自定义的 fetch 函数，结合 Promise 链和闭包机制，模拟出类似拦截器的行为。核心思路是：统一入口、预处理请求选项、统一处理响应、集中错误逻辑。
封装全局 fetch 函数，注入请求前/响应后逻辑
创建一个可复用的 myFetch，在调用原生 fetch 前修改 url 或 options，响应后统一解析、鉴权检查或日志记录：
- 请求拦截：添加默认 headers（如 token）、拼接 base URL、记录请求时间
- 响应拦截：检查 status、自动解析 JSON、处理 401/500 等状态码、统一抛错
- 所有请求都走这个函数，避免直接调用原生
fetch
示例：
const BASE_URL = 'https://api.example.com';
// 请求拦截器（可复用函数）
const requestInterceptor = (url, options) => {
const token = localStorage.getItem('token');
return {
url: `${BASE_URL}${url}`,
options: {
...options,
headers: {
'Content-Type': 'application/json',
...(token && { Authorization: `Bearer ${token}` }),
...options.headers
}
}
};
};
// 响应拦截器
const responseInterceptor = async (response) => {
if (!response.ok) {
const errorData = await response.json();
throw new Error(errorData.message || `HTTP ${response.status}`);
}
return response.json(); // 统一返回解析后的数据
};
// 全局 fetch 封装
const myFetch = async (url, options = {}) => {
const { url: finalUrl, options: finalOptions } = requestInterceptor(url, options);
const response = await fetch(finalUrl, finalOptions);
return responseInterceptor(response);
};
// 使用
myFetch('/users').then(data => console.log(data)).catch(err => console.error(err));
支持多个拦截器（类中间件链式调用）
如果需要插拔式拦截（比如开发环境加 mock 拦截、测试环境加日志），可用数组管理拦截器，按序执行：
立即学习“Java免费学习笔记（深入）”；
- 请求拦截器数组：每个函数接收
(url, options)，返回新的{ url, options } - 响应拦截器数组：每个函数接收
response，返回处理后的 Promise（如response.json()） - 用
reduce串起请求/响应流程，实现洋葱模型
配合 AbortController 实现统一取消与超时
可在请求拦截阶段自动注入信号（signal），例如全局超时控制或手动取消所有请求：
- 维护一个全局
AbortController实例（或按业务域分组） - 在
requestInterceptor中合并用户传入的signal和全局 signal - 暴露
abortAll()方法，便于登出或切换用户时清理待处理请求
注意事项与边界情况
这类封装不能改变原生 fetch 的底层行为，需注意：
- 重定向（redirect）默认为
follow，若需拦截重定向响应，需设redirect: 'manual'并自行处理 - 流式响应（如
response.body）无法被多次读取，响应拦截中若已调用response.json()，后续不能再用response.text() - 跨域请求中，某些 header（如
Authorization）需服务端开启Access-Control-Allow-Headers
