通过拦截 fetch 返回的 response 对象并修改其 json()、text() 等方法，可以在不改变原有调用逻辑的前提下实现结果代理。具体做法是创建一个包装函数，在获取到响应后根据业务规则（如状态码或特定字段）决定是直接返回原始数据还是返回默认值，从而统一处理接口异常或数据结构不一致的问题。
如何封装一个通用的 fetch 代理函数
定义一个高阶函数 createFetchProxy，它接收一个配置对象作为参数，该对象包含用于判断是否进行代理的条件函数和代理后的默认返回值。在函数内部，我们重新包装 window.fetch 或直接使用 Promise 链式调用，在解析 JSON 之前插入代理逻辑。如果条件满足，则返回预设的默认结构；否则，将原始响应数据透传出去。
function createFetchProxy(options) {
const { shouldProxy, proxyData } = options;
return async function(url, init = {}) {
try {
const response = await fetch(url, init);
const contentType = response.headers.get('content-type');
let data;
if (contentType && contentType.includes('application/json')) {
data = await response.json();
} else {
data = await response.text();
}
// 检查是否需要代理
if (shouldProxy(data, response)) {
console.log('Triggering proxy strategy');
return proxyData;
}
return data;
} catch (error) {
console.error('Fetch error:', error);
return proxyData; // 网络错误也返回代理数据
}
};
}
// 使用示例
const myFetch = createFetchProxy({
shouldProxy: (data, res) => res.status === 500 || !data.success,
proxyData: { success: false, data: null, message: 'Service Unavailable' }
});
myFetch('/api/user').then(console.log); // 若接口报错，输出代理数据
如何处理不同状态码的差异化代理
针对不同的 HTTP 状态码或业务错误码，可以配置多个代理策略。例如，对于 401 未授权请求，代理返回空用户信息以触发前端登出；对于 404 资源不存在，代理返回空数组以避免页面渲染崩溃。这种策略允许开发者集中管理错误反馈，保持 UI 层的稳定性。
const advancedProxy = createFetchProxy({
shouldProxy: (data, res) => {
if (res.status === 401) return true;
if (res.status === 404) return true;
if (data.code === 500) return true;
return false;
},
proxyData: (data, res) => {
if (res.status === 401) return { user: null, token: null };
if (res.status === 404) return { list: [] };
if (data.code === 500) return { list: [], error: 'Server Error' };
return {};
}
});
// 注意：上面的 proxyData 需要改为函数形式以支持动态返回
// 修正后的 createFetchProxy 需支持 proxyData 为函数
function createDynamicFetchProxy(options) {
const { shouldProxy, getProxyData } = options;
return async function(url, init = {}) {
try {
const response = await fetch(url, init);
let data = await response.json().catch(() => null);
if (shouldProxy(data, response)) {
return typeof getProxyData === 'function' ? getProxyData(data, response) : getProxyData;
}
return data;
} catch (e) {
return typeof getProxyData === 'function' ? getProxyData(null, { status: 0 }) : getProxyData;
}
};
}
代理策略对 TypeScript 类型推断的影响
在使用 TypeScript 时，代理策略会导致返回类型变得不确定。因为代码可能在运行时返回原始数据类型或代理数据结构，这破坏了类型的一致性。为了解决这个问题，必须定义一个联合类型或基类来涵盖所有可能的返回情况，或者在调用代理函数时显式断言类型。建议在代理层统一返回一种标准化的信封格式（Envelope），确保类型安全。
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
