别再封装 Axios 了！用 RPC 像调用本地函数一样写接口（支持 Vue/React/Node）

前言

如果你体验过小程序云开发（TCB）或者 uniCloud，你一定会被那种"云对象"的开发模式深深吸引：不需要关心 URL，不需要关心 HTTP 方法，直接 await cloud.user.add() 就完了。

但在传统的 Web 前端（Vue/React）或者 Node.js 开发中，我们依然深陷在 Axios 的封装泥潭里：

写一个庞大的 request.js，配置拦截器。
在 api/ 目录下创建一堆文件，把 URL 一个个存成常量。
每个接口都要写一遍 export function xxx(data) { return request(...) }。
调用时还要时刻留意是 GET 还是 POST，参数放 params 还是 data。

我们累了。我们只想调个函数而已，为什么非要管 HTTP 是什么？

今天，向大家开源一个极其轻量（零依赖）的通用 RPC 客户端 ------ rpc-client-fetch 。它作为 js-rpc 生态的一部分，致力于让 Web/Node 开发也能拥有原生云开发般的丝滑体验。

🌟 什么是 rpc-client-fetch？

它是一个基于标准 Fetch API 的 RPC 客户端。

它不是 Axios 的封装：它底层直接使用原生 Fetch，体积极小。
它没有 URL 烦恼 ：你不需要在代码里写死 /api/v1/user/info 这种路径。
它全平台通用：完美运行在浏览器、Node.js (18+) 和 React Native 中。

它的核心魔法在于： 通过 ES6 Proxy 技术，将你的"函数调用"动态转化为标准化的 HTTP POST 请求。

🆚 代码对比：高下立判

光说不练假把式，我们直接看代码对比。

😭 传统模式 (Axios)

你需要先定义接口，再调用：

javascript 复制代码

// api/user.js
import request from '@/utils/request';

export function getUserInfo(id) {
  return request({
    url: '/user/info',
    method: 'GET',
    params: { id }
  });
}

// 业务组件中
import { getUserInfo } from '@/api/user';

async function load() {
  const res = await getUserInfo(123);
  // 还得记得解构 res.data
}

😍 RPC 模式 (rpc-client-fetch)

没有定义，直接调用：

javascript 复制代码

// 业务组件中
import rpc from '@/api/rpc'; // 初始化一次即可

async function load() {
  // ✨ 就像调用本地函数一样！
  // 自动发送 POST 到 /user/info (取决于服务端路由策略)
  // 参数 123 自动序列化
  const user = await rpc.user.getInfo(123);
  
  console.log(user); 
}

少写了 80% 的胶水代码，逻辑更加聚焦业务。

🛠️ 核心特性深挖

1. 零依赖，极速轻量

现在的浏览器和 Node.js 18+ 都原生支持 fetch。rpc-client-fetch 利用了这一特性，不依赖 Axios，不依赖 jQuery，甚至不依赖 lodash。它就是几十行纯粹的 JS 代码，打包体积几乎可以忽略不计。

2. 智能的动态鉴权

在 Web 开发中，Token 通常存在 localStorage 里。Axios 需要在拦截器里注入 Token，而 rpc-client-fetch 提供了一种更符合直觉的函数式配置。

javascript 复制代码

const rpc = createRpcClient({
  url: 'https://api.example.com/rpc',
  
  // 🔥 重点：headers 可以是一个函数！
  // 每次发起请求前，这个函数都会被执行
  headers: () => {
    const token = localStorage.getItem('token');
    return {
      'Authorization': token ? `Bearer ${token}` : ''
    };
  }
});

这意味着你永远不用担心 Token 过期后请求头没更新的问题，只要 Storage 里的值变了，下一次请求自动带上最新的。

3. 统一的错误处理

无论是 HTTP 层面的错误（如 404、500 网关错误），还是后端业务层面的错误（如"余额不足"抛出的异常），都会被统一封装。

前端只需要一个标准的 try...catch：

javascript 复制代码

try {
  await rpc.order.create({ amount: 100 });
} catch (err) {
  // 无论是网断了(Network Error)，还是服务端 throw new Error('余额不足')
  // 都会走进这里
  console.error(err.message);
  
  if (err.code === 'UNAUTHORIZED') {
    // 去登录
  }
}

🚀 快速上手

安装

bash 复制代码

npm install rpc-client-fetch

初始化 (src/api/rpc.js)

建议在项目中新建一个文件统一初始化。

javascript 复制代码

import { createRpcClient } from 'rpc-client-fetch';

// 假设你的服务端部署在腾讯云 API 网关，或者是 Node.js 本地服务
const SERVER_URL = process.env.NODE_ENV === 'production' 
  ? 'https://service-xxx.tencentapigw.com/release/rpc'
  : 'http://localhost:3000';

const rpc = createRpcClient({
  url: SERVER_URL,
  headers: () => ({
    'Authorization': localStorage.getItem('token') || ''
  })
});

export default rpc;

在 Vue/React 中使用

javascript 复制代码

import rpc from '@/api/rpc';

// Vue 3 示例
const handleLogin = async () => {
  try {
    const userInfo = await rpc.auth.login(username.value, password.value);
    console.log('登录成功', userInfo);
  } catch (e) {
    alert(e.message);
  }
};

🧩 配套的服务端

既然客户端发送的是标准 RPC 报文，服务端自然需要解析。js-rpc 生态提供了多种服务端支持，助你全栈起飞：

如果你用 Node.js (Express/Koa/原生) ：可以使用 rpc-server-node。一行代码启动自带 CORS 和静态托管的 API 服务。
如果你用腾讯云云函数 (SCF) ：可以使用 rpc-server-scf。完美适配 API 网关，解决鉴权痛点。
如果你用微信小程序云开发 ：可以使用 rpc-server-tcb。

🔗 项目链接

js-rpc 是一个旨在抹平端到端调用差异的开源项目，欢迎 Star 和体验！

GitHub : github.com/myliweihao/...
npm : www.npmjs.com/package/rpc...

告别繁琐的 API 封装，把时间留给更重要的业务逻辑吧！🚀