JavaScript Fetch API 怎么实现请求数据预追踪策略-js教程-PHP中文网

Fetch API 请求数据预追踪策略

在 javascript 中实现 fetch api 的请求数据预追踪，核心做法是封装一个自定义的 fetch 函数或拦截器。该函数在执行实际网络请求前，通过 promise 链记录请求开始时间、url、方法等元数据，并在响应返回后计算耗时、记录状态码及响应体摘要。这样可以在不侵入业务逻辑的前提下，统一收集所有网络请求的性能与数据指标。

JavaScript Fetch API 怎么实现请求数据预追踪策略

如何封装带预追踪功能的 Fetch 拦截器

要实现这一功能，可以创建一个高阶函数 `createTrackedFetch`，它接收原始 `fetch` 作为参数并返回一个新的 fetch 函数。新函数内部使用 `performance.now()` 获取高精度时间戳，在调用原生 fetch 之前初始化追踪对象，在 await 响应完成后填充结果字段。这种方式确保了每个请求都有独立的追踪上下文，且能准确反映从发起请求到接收完整响应的全过程。

JavaScript Fetch API 怎么实现请求数据预追踪策略

Java调试

通过 JDWP 实现 Java 远程调试：连接远程 JVM、设置断点、单步执行代码、查看变量值、获取调用栈。适用于需要调试远程 Java 应用、排查运行时状态、追踪代码执行流程的场景。术语注解 JDWP：Java Debug Wire Protocol，Java 调试有线协议（Java 远程调试底层通信协议） remote JVM：远程 Java 虚拟机 step through code：代码单步调试（步入 / 步过 / 步出调试） inspect variables：变量查看 / 变量检视 stac

下载

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`，追踪函数可以记录更详细的信息，如完整的请求头和响应头。这种条件判断使得追踪系统既能保持轻量级默认行为，又能在需要深度分析时提供丰富细节，而无需修改核心追踪逻辑。

// 扩展之前的 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;
    }
  };
}