EIP8130是一套面向前端应用的标准化网络连接规范，它定义了连接协商、请求生命周期、缓存语义和错误码体系。围绕这套规范实现的Networking库，目标是把传统项目中由axios、fetch、拦截器、重试逻辑拼凑出来的网络层，替换成一个统一、可观测的基础设施。对于React应用来说，迁移的收益不只是少装几个依赖，更重要的是让网络行为变得可预测、可测试、可监控。本文按照迁移的实际步骤展开，覆盖依赖梳理、核心封装、React集成和性能调优四个部分。
迁移前的准备：梳理现有网络依赖
动手改代码之前，第一步是搞清楚当前项目里到底有多少种发请求的方式。很多React项目经过多人迭代后，往往同时存在axios实例、原生fetch、封装过的request工具函数，甚至还有直接写在组件里的XMLHttpRequest。这些调用方式散落在各个目录里，错误处理逻辑各写各的，是迁移最大的阻力来源。
建议先用全局搜索的方式列出所有请求入口，重点关注三类代码：一是直接调用fetch或axios的组件；二是各类拦截器，比如统一注入token的逻辑；三是重试和超时的自定义实现。把这三类逻辑整理成清单后，你会发现真正需要迁移的其实是一个稳定的请求边界，而不是几百个组件。
接下来安装Networking库并确认版本兼容性。Networking要求宿主环境支持AbortController和Promise，现代浏览器都没问题，如果项目还要兼容旧环境，需要提前引入对应的polyfill。同时检查构建工具的tree-shaking配置，Networking按模块拆分导出，配置正确可以显著减少打包体积。
npm install @eip8130/networking --save
// 确认核心模块可用
import { createClient, CachePolicy, RetryPolicy } from '@eip8130/networking';
console.log(typeof createClient); // function封装统一的Networking客户端
迁移的核心思路是建立一个全局唯一的客户端实例，所有请求都从这个实例发出。这样做的直接好处是：token注入、超时设置、重试策略、日志埋点只需要配置一次，而不是在每个调用点重复实现。EIP8130规范把这类横切逻辑统称为连接策略，Networking提供了声明式的配置方式。
下面是一个典型的客户端定义。注意其中auth模块的实现方式，它替代了原来的axios请求拦截器，在每次请求前自动附加凭证，并在收到401响应时触发刷新流程。与拦截器相比，这种方式的优势在于刷新过程中并发的请求会被自动排队，避免旧项目里常见的并发刷新竞态问题。
import { createClient, CachePolicy, RetryPolicy } from '@eip8130/networking';
export const client = createClient({
baseURL: 'https://api.ipipp.com',
timeout: 10000,
auth: {
attach(header) {
header.set('Authorization', `Bearer ${getToken()}`);
},
async onUnauthorized() {
await refreshToken(); // 刷新完成后在途请求自动重放
}
},
retry: new RetryPolicy({
maxAttempts: 3,
backoff: 'exponential',
retryOn: [502, 503, 504] // 仅对网关类错误重试
}),
cache: new CachePolicy({
strategy: 'stale-while-revalidate',
ttl: 60 * 1000
})
});缓存策略是Networking相对传统方案提升最明显的部分。stale-while-revalidate模式下，页面会先展示缓存数据再静默更新，用户感知到的加载时间大幅缩短。对于强实时性的数据，可以为单个请求关闭缓存或缩短TTL，策略是按请求粒度生效的，灵活性比在业务层手写内存缓存高得多。
React集成：替换组件内的请求逻辑
客户端封装完成后，就要处理组件层面的改造。如果项目已经在用数据请求库，替换成本较低；如果请求逻辑直接写在useEffect里，则需要借这次迁移顺便规范化。Networking提供了配套的useResource钩子，它内部处理了请求取消、竞态防护和加载状态管理，这正是手写useEffect请求最容易出错的地方。
看一个典型的改造前后对比。旧代码里，组件卸载后请求返回导致的setState警告、快速切换路由时的数据错乱，都需要手动用AbortController处理。而useResource把这些逻辑内置了，传参变化时旧的请求自动取消，新请求自动发出。
// 改造前：手写useEffect，存在竞态和取消逻辑缺失
function UserList({ keyword }) {
const [users, setUsers] = useState([]);
useEffect(() => {
fetch(`/api/users?q=${keyword}`)
.then(res => res.json())
.then(setUsers); // 组件卸载后仍可能触发setState
}, [keyword]);
return <ul>{users.map(u => <li key={u.id}>{u.name}</li>)}</ul>;
}
// 改造后：使用useResource
import { useResource } from '@eip8130/networking/react';
function UserList({ keyword }) {
const { data: users, isLoading, error } = useResource(
client.resource('/api/users'),
{ params: { q: keyword } } // keyword变化时自动取消旧请求
);
if (isLoading) return <p>加载中</p>;
if (error) return <p>{error.message}</p>;
return <ul>{users.map(u => <li key={u.id}>{u.name}</li>)}</ul>;
}批量请求也是常见场景。旧项目里往往用Promise.all硬编码并行请求，一旦其中一个接口失败整个块全部失败。Networking的资源组合API支持局部失败语义，单个子请求失败不会拖垮整组数据，配合Suspense使用时还可以按接口粒度展示加载占位，体验比整页loading好得多。
对于React 18的并发特性，建议把网络层的请求发起时机交给useResource或渲染层的数据驱动机制，而不是继续在副作用里手动触发。这样在并发渲染中断重试的场景下，网络请求不会因为渲染中断而重复发出，这是迁移中最容易被忽略但收益很实在的一点。
性能调优与错误降级
迁移完成不代表优化结束，还需要针对实际流量特征做调优。首先是连接复用，Networking默认开启了HTTP连接复用，如果后端支持HTTP/2，同一个域名下的并发请求会复用同一条连接，握手开销显著降低。检查方式是打开浏览器开发者工具的Network面板，观察Protocol列是否显示h2。
其次是重试策略的精细化。默认配置对502、503、504重试，但写操作要谨慎，POST请求重试可能造成重复下单这类业务问题。建议对非幂等请求显式关闭重试或改用幂等键机制，示例如下：
// 非幂等写操作：关闭自动重试，改用幂等键
const order = await client.post('/api/orders', payload, {
retry: { enabled: false },
headers: { 'Idempotency-Key': crypto.randomUUID() }
});最后是错误降级。网络层统一后，可以在客户端注册全局错误处理器，按EIP8130错误码分类处理：连接超时给用户明确的网络提示，业务错误码交给对应模块处理，鉴权失败统一跳转登录页。这种集中式的错误体系比每个页面各自catch要可维护得多，也让监控埋点有了统一的收口位置，接入性能监控平台时只需在客户端初始化处配置一次。
整个迁移建议按模块灰度推进：先迁移一个独立业务模块验证封装的正确性，再逐步替换全站请求。迁移完成后删掉axios依赖，打包体积通常能减少几十KB，而网络行为的统一带来的可维护性提升，会在后续的迭代中持续体现。