別再封裝 Axios 了！用 RPC 像調用本地函數一樣寫接口（支持 Vue/React/Node）詳情 - javascript,rpc,全棧,api設計,axios 李偉豪博客

前言

如果你體驗過小程序雲開發（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)

你需要先定義接口，再調用：

// 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)

沒有定義，直接調用：

// 業務組件中
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 提供了一種更符合直覺的函數式配置。

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：

try {
  await rpc.order.create({ amount: 100 });
} catch (err) {
  // 無論是網斷了(Network Error)，還是服務端 throw new Error('餘額不足')
  // 都會走進這裏
  console.error(err.message);
  
  if (err.code === 'UNAUTHORIZED') {
    // 去登錄
  }
}

🚀 快速上手

安裝

npm install rpc-client-fetch

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

建議在項目中新建一個文件統一初始化。

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 中使用

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: https://github.com/myliweihao/js-rpc
npm: https://www.npmjs.com/package/rpc-client-fetch

告別繁瑣的 API 封裝，把時間留給更重要的業務邏輯吧！🚀

李偉豪博客

李偉豪博客

博客 / 詳情