如何在ofetch/Next中获取响应时间及添加自定义内部数据？

ofetch支持扩展请求选项，你可以通过自定义字段的方式在请求中附加内部数据（无需通过URL传递），后续在响应钩子中直接读取。

实现方式：自定义请求选项 + 响应钩子 #

1. 发起请求时，给ofetch的选项添加自定义字段（比如_meta）来存放自定义数据
2. 在onResponse钩子中，通过response.options访问这个自定义字段，还可以把数据挂载到响应对象上方便后续使用

代码示例：

// 创建带钩子的ofetch实例
const myFetch = ofetch.create({
  onRequest({ options }) {
    // 统一添加全局自定义数据（可选）
    options._meta = options._meta || { requestId: Math.random().toString(36).slice(2) };
  },
  onResponse({ response, options }) {
    // 读取自定义数据
    console.log('请求自定义数据:', options._meta);
    // 挂载到响应对象，方便后续调用时直接获取
    response._meta = options._meta;
  }
});

// 发起请求时传入自定义数据
const res = await myFetch('/api/data', {
  _meta: { userId: 123, traceId: 'abc-123' }
});

// 后续直接从响应读取自定义数据
console.log('响应携带的自定义数据:', res._meta);

通过onRequest钩子记录请求开始时间，在onResponse或onResponseError钩子中计算时间差，即可得到响应耗时。

代码示例：

const timedFetch = ofetch.create({
  onRequest({ options }) {
    // 记录请求发起的时间戳
    options._startTime = Date.now();
  },
  onResponse({ response, options }) {
    // 计算响应耗时
    const responseTime = Date.now() - options._startTime;
    console.log(`请求耗时: ${responseTime}ms`);
    // 挂载到响应对象方便后续使用
    response.responseTime = responseTime;
  },
  onResponseError({ error, options }) {
    // 错误场景也计算耗时
    const responseTime = Date.now() - options._startTime;
    console.log(`请求失败，耗时: ${responseTime}ms`);
    error.responseTime = responseTime;
  }
});

// 在Next.js中使用（API路由、客户端组件均适用）
async function fetchData() {
  try {
    const res = await timedFetch('/api/hello');
    console.log('响应时间:', res.responseTime);
  } catch (err) {
    console.log('错误响应时间:', err.responseTime);
  }
}

注意：自定义字段建议加下划线前缀（比如_meta、_startTime），避免和ofetch内置选项冲突。

内容的提问来源于stack exchange，提问作者Quoting Eddie