通过拦截器模式实现接口请求结果日志策略，核心做法是封装 fetch 函数并在其内部统一处理请求与响应。在发送请求前记录开始时间与参数，在收到响应后捕获状态码、耗时及返回数据，并通过 console.log 或自定义上报接口输出结构化日志。若需区分成功与失败，可在 try...catch 块中分别处理正常响应与网络异常。
如何封装 fetch 以统一记录请求参数和响应时间
封装 fetch 的关键在于创建一个高阶函数或代理对象，在调用原生 fetch 前后插入日志逻辑。具体做法是定义一个 logFetch 函数，接收 URL 和配置项作为参数，使用 Date.now() 获取请求起始时间戳，调用原生 fetch 后解析响应体（如 json()），计算耗时并打印包含 URL、方法、状态码、耗时和响应数据的日志对象。这样每次调用 logFetch 都会自动执行日志记录，无需在每个业务代码中重复编写。
const logFetch = async (url, options = {}) => {
const startTime = Date.now();
console.log(`[Request] ${options.method || 'GET'} ${url}`);
try {
const response = await fetch(url, options);
const data = await response.json();
const duration = Date.now() - startTime;
console.log(`[Response] Status: ${response.status}, Duration: ${duration}ms`, data);
return { status: response.status, data };
} catch (error) {
const duration = Date.now() - startTime;
console.error(`[Error] Failed after ${duration}ms`, error.message);
throw error;
}
};
// 使用示例
logFetch('https://api.example.com/user', { method: 'POST' });
如何处理非 JSON 响应或网络异常的日志记录
当接口返回非 JSON 内容或发生网络中断时，直接调用 response.json() 会抛出异常，导致日志记录不完整。解决方法是在解析响应体前检查 Content-Type 头，若非 JSON 类型则使用 text() 或 blob() 读取；同时利用 try...catch 包裹整个流程，确保即使网络层失败也能记录错误信息。此外，对于 HTTP 错误状态码（如 404、500），应在日志中标记为失败，避免误判为成功。
const robustLogFetch = async (url, options = {}) => {
const startTime = Date.now();
try {
const response = await fetch(url, options);
const contentType = response.headers.get('content-type');
let data;
if (contentType && contentType.includes('application/json')) {
data = await response.json();
} else {
data = await response.text();
}
const duration = Date.now() - startTime;
if (!response.ok) {
console.warn(`[HTTP Error] ${response.status} for ${url}`, data);
} else {
console.log(`[Success] ${url} in ${duration}ms`, data);
}
return { ok: response.ok, status: response.status, data };
} catch (error) {
console.error(`[Network Error] ${url}: ${error.message}`);
throw error;
}
};
基于请求超时条件如何调整日志策略
在实际开发中，长时间无响应的请求会阻塞界面，因此需要结合 AbortController 设置超时并记录超时日志。具体做法是在发起请求时创建 AbortController 实例，设置定时器在指定毫秒后调用 controller.abort()，并在 catch 块中判断是否为中止错误，若是则记录超时日志而非普通网络错误。这种方式能准确区分“服务器慢”与“网络断开”，优化日志分析的准确性。
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
