可通过重写 window.fetch 实现全局接口性能埋点:缓存原生 fetch,包裹调用并透传 this 和参数;用 performance.now() 记录前后时间差;监听 then/catch 上报 url、method、耗时、状态等,异步非阻塞发送。

可以通过重写 window.fetch 方法,在发起请求前后记录时间戳,计算耗时并上报,实现全局自动化接口性能埋点。
保存原生 fetch 并重写函数
先缓存原始的 fetch 方法,再用自定义逻辑包裹调用。注意保持 this 上下文和参数透传,避免影响原有行为:
- 使用
Function.prototype.bind或箭头函数确保this指向window - 参数必须完整传递(
input和init),否则 POST/headers 等功能会失效 - 返回 Promise,以便上层正常 await 或 .then
在请求前后打点并计算耗时
在调用原 fetch 前记录开始时间,Promise resolve/reject 后记录结束时间,差值即为真实耗时:
- 开始时间建议用
performance.now(),精度远高于Date.now() - 需同时监听
then和catch,覆盖成功与失败场景 - 可从
input中提取 URL,从init?.method中获取请求方法,用于标识接口
上报埋点数据(轻量且防阻塞)
上报逻辑不应阻塞主流程,推荐异步、非关键路径发送:
- 用
setTimeout(..., 0)或queueMicrotask推迟到当前任务队列末尾 - 上报可走独立轻量接口(如
/api/log/perf),或存入内存队列批量上报 - 建议带上:URL、method、耗时(ms)、状态(ok / error)、时间戳、是否跨域等上下文
注意事项与兼容性处理
实际部署需规避常见陷阱:
- 避免重复 patch(检查
window.__originalFetch是否已存在) - 若项目用了 polyfill(如 whatwg-fetch),需 patch 的是 polyfill 后的最终 fetch,而非原生
- 某些安全策略(如 CORP/CORS)可能拦截上报请求,建议上报地址与主站同源或配置白名单
- 开发环境可加开关控制是否启用,避免测试干扰
不复杂但容易忽略细节,关键是保证原逻辑 100% 透传、时间采集精准、上报不拖慢业务。
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南











