Fetch API 请求数据预追踪策略
在 javascript 中实现 fetch api 的请求数据预追踪，核心做法是封装一个自定义的 fetch 函数或拦截器。该函数在执行实际网络请求前，通过 promise 链记录请求开始时间、url、方法等元数据，并在响应返回后计算耗时、记录状态码及响应体摘要。这样可以在不侵入业务逻辑的前提下，统一收集所有网络请求的性能与数据指标。
如何封装带预追踪功能的 Fetch 拦截器
要实现这一功能，可以创建一个高阶函数 `createTrackedFetch`，它接收原始 `fetch` 作为参数并返回一个新的 fetch 函数。新函数内部使用 `performance.now()` 获取高精度时间戳，在调用原生 fetch 之前初始化追踪对象，在 await 响应完成后填充结果字段。这种方式确保了每个请求都有独立的追踪上下文，且能准确反映从发起请求到接收完整响应的全过程。
const originalFetch = window.fetch;
function createTrackedFetch(fetchFn) {
return async function(url, options = {}) {
const startTime = performance.now();
const trackId = Math.random().toString(36).substr(2, 9);
console.log(`[Pre-Track] ID: ${trackId}, URL: ${url}, Method: ${options.method || 'GET'}`);
try {
const response = await fetchFn(url, options);
const endTime = performance.now();
const duration = endTime - startTime;
// 模拟读取响应体以进行更详细的追踪（注意：这会消耗响应流）
let responseData = null;
if (response.ok && response.headers.get('content-type')?.includes('application/json')) {
try {
responseData = await response.clone().json();
} catch (e) {
responseData = '[Parse Error]';
}
}
const trackingData = {
id: trackId,
url,
method: options.method || 'GET',
status: response.status,
duration: duration.toFixed(2),
timestamp: new Date().toISOString(),
dataPreview: responseData ? JSON.stringify(responseData).substring(0, 50) : 'N/A'
};
console.log('[Post-Track]', trackingData);
return response;
} catch (error) {
const endTime = performance.now();
console.error(`[Error Track] ID: ${trackId}, Error: ${error.message}`);
throw error;
}
};
}
// 使用示例
const trackedFetch = createTrackedFetch(originalFetch);
trackedFetch('/api/data').then(res => console.log('Response received'));基于特定输入条件的追踪行为差异
当请求包含特定的查询参数或 Header 时，预追踪策略可以动态调整记录的内容。例如，如果 URL 中包含 `?debug=true` 参数，或者 Header 中指定了 `X-Trace-Level: verbose`，追踪函数可以记录更详细的信息，如完整的请求头和响应头。这种条件判断使得追踪系统既能保持轻量级默认行为，又能在需要深度分析时提供丰富细节，而无需修改核心追踪逻辑。
立即学习“Java免费学习笔记（深入）”；
// 扩展之前的 createTrackedFetch 增加条件判断
function createSmartTrackedFetch(fetchFn) {
return async function(url, options = {}) {
const startTime = performance.now();
const isVerbose = url.includes('verbose') || options.headers?.['X-Trace-Level'] === 'verbose';
const baseLog = {
time: startTime,
url,
method: options.method || 'GET'
};
if (isVerbose) {
console.log('[Verbose Pre-Track]', { ...baseLog, headers: options.headers });
} else {
console.log('[Basic Pre-Track]', baseLog);
}
try {
const response = await fetchFn(url, options);
const endTime = performance.now();
if (isVerbose) {
console.log('[Verbose Post-Track]', {
status: response.status,
duration: endTime - startTime,
headers: Object.fromEntries(response.headers.entries())
});
} else {
console.log('[Basic Post-Track]', {
status: response.status,
duration: endTime - startTime
});
}
return response;
} catch (error) {
console.error(`[Track Error]`, { url, error: error.message });
throw error;
}
};
} 
