JavaScript无法直接全局监控fetch请求生命周期，需通过重写window.fetch代理、PerformanceObserver监听resource条目或CDP协议（调试用）实现；对axios等封装库应优先使用其拦截器。
JavaScript 中无法直接通过 Fetch API 本身全局监控所有请求的生命周期，因为 Fetch 是原生 Promise-based 接口，不提供拦截或钩子机制。但可以通过以下几种实用方式实现近似效果，核心思路是代理 fetch 函数或结合浏览器 DevTools 协议（仅限调试）。
重写 window.fetch 进行全局拦截
这是最常用、兼容性好、适用于开发和部分生产监控的方式。通过保存原始 fetch，再覆盖为自定义函数，在调用前后注入日志、计时、错误捕获等逻辑。
- 保存原生 fetch：
const originalFetch = window.fetch; - 重写 fetch，统一处理 request 和 response：
window.fetch = async function(url, options = {}) {
const startTime = performance.now();
const controller = new AbortController();
const signal = controller.signal;
<p>// 合并用户传入的 signal（如有）
if (options.signal) {
options.signal.addEventListener('abort', () => controller.abort());
}</p><p>console.log('[Fetch Start]', { url, method: options.method || 'GET', startTime });</p><p>try {
const response = await originalFetch(url, { ...options, signal });
const endTime = performance.now();
const duration = endTime - startTime;</p><pre class="brush:php;toolbar:false;">console.log('[Fetch Success]', { url, status: response.status, duration });
// 可选：克隆响应体用于日志（注意：body 只能读一次）
const clonedResponse = response.clone();
const bodyPromise = clonedResponse.text().catch(() => null);
return response;} catch (err) { const endTime = performance.now(); console.error('[Fetch Error]', { url, error: err.message, duration: endTime - startTime }); throw err; } };
⚠️ 注意：该方式无法监听到 service worker 中发起的 fetch（如 caches.match），也不影响 XMLHttpRequest；若页面使用了第三方库封装的 fetch（如 axios 默认不走 window.fetch），需额外适配。
立即学习“Java免费学习笔记（深入）”；
利用 PerformanceObserver 监控资源加载（含 fetch 请求）
PerformanceObserver 可监听 resource 类型条目，其中 type 为
的条目对应 fetch 请求完成事件（Chrome 94+ 支持，Firefox 部分支持）。</p><ul><li>它提供真实耗时、重定向次数、协议、传输大小等字段</li><li>但<strong>不包含请求头、请求体、响应体内容</strong>，也无法拦截或修改请求</li></ul><font color="#888"><pre class='brush:php;toolbar:false;'>const observer = new PerformanceObserver((list) => {
list.getEntries().forEach((entry) => {
if (entry.entryType === 'resource' && entry.initiatorType === 'fetch') {
console.log('[Perf Resource]', {
url: entry.name,
duration: entry.duration,
transferSize: entry.transferSize,
encodedBodySize: entry.encodedBodySize
});
}
});
});
<p>observer.observe({ entryTypes: ['resource'] });
配合 DevTools 协议（仅限本地调试）
在 Chrome/Edge 中，可通过 Chrome DevTools Protocol (CDP) 的 Network.requestWillBeSent、<code>Network.responseReceived、Network.loadingFinished 等事件，完整捕获每个网络请求全周期（包括 fetch、XHR、script、img 等）。
- 需借助 Puppeteer、Playwright 或 Chrome 扩展实现
- 不能在普通网页 JS 中直接调用（受权限限制）
- 适合自动化测试、本地调试、构建监控工具
补充：对已封装库（如 axios）单独监听
如果项目大量使用 axios 等库，应优先利用其内置拦截器：
axios.interceptors.request.use(config => {
console.log('[Axios Request]', config.url);
config.metadata = { startTime: Date.now() };
return config;
});
<p>axios.interceptors.response.use(
response => {
console.log('[Axios Response]', {
url: response.config.url,
duration: Date.now() - response.config.metadata.startTime
});
return response;
},
error => {
console.error('[Axios Error]', error.config?.url, error.message);
throw error;
}
);不复杂但容易忽略：fetch 本身无生命周期钩子，真正可行的是拦截 + 观察 + 工具链协同。生产环境建议以 fetch 代理为主，调试阶段叠加 PerformanceObserver 或 CDP 获取更底层指标。
