评论

魔法降临!让小程序调用云函数如丝般顺滑,调用接口仿佛就是调用存在于本地的函数

还在小程序里手写冗长的 wx.cloud.callFunction 吗?作为 rpc-server-tcb 的黄金搭档,rpc-client-tcb 带来了魔法般的调用体验。

在上一篇文章中,我们使用 rpc-server-tcb 彻底重构了云函数的服务端,让它变得前所未有的清爽。但一个完整的调用链路,客户端的体验同样至关重要。

让我们先回忆一下小程序原生调用云函数的方式:

// 你是不是也厌倦了这样的代码?
wx.cloud.callFunction({
  name: 'rpc',
  data: {
    // 手动指定模块和方法名
    module: 'user',
    action: 'getInfo',
    params: { userId: '123' }
  },
  success: res => {
    if (res.result.success) {
      console.log(res.result.data);
    } else {
      console.error(res.result.error);
    }
  },
  fail: err => {
    console.error('调用失败', err);
  }
})

冗长的模板代码、手动拼接的参数、层层嵌套的回调…… 这简直是一场灾难!它不仅写起来痛苦,读起来更是一种折磨。

现在,准备好迎接魔法吧!

向你介绍 rpc-client-tcb —— rpc-server-tcb 的黄金搭档。它将彻底颠覆你调用云函数的方式,让远程调用感觉就像在调用本地函数一样简单、自然。

✨ 见证奇迹的时刻

首先,在你的小程序 utils 目录下创建一个 rpc.js 文件来初始化客户端:

utils/rpc.js

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

// 只需要初始化一次,指定你的云函数入口名
const rpc = createRpcClient({
  functionName: 'rpc', 
});

export default rpc;

现在,假设我们要调用上一篇文章中 user 模块的 getInfo 方法,在页面中可以这样写:

import rpc from '../../utils/rpc';

Page({
  async onGetUser() {
    try {
      // 看!就像调用一个本地的 user.getInfo 方法!
      const userInfo = await rpc.user.getInfo('123');
      
      console.log('获取成功:', userInfo); // { id: '123', name: 'Alice', role: 'admin' }
    } catch (error) {
      // 无论是网络错误还是业务错误,都能在这里被优雅地捕获
      wx.showToast({ title: error.message, icon: 'none' });
    }
  },
});

对比一下,天壤之别!

  • 没有了 wx.cloud.callFunction 的任何踪影。
  • 没有了手动拼装的 data 对象。
  • 没有了烦人的 success/fail 回调。
  • 参数 '123' 被直接、自然地传递。
  • 完美拥抱 async/awaittry...catch,代码逻辑清晰如画。

rpc.user.getInfo 仿佛就是一个真实存在于本地的函数,rpc-client-tcb 在底层为你处理了所有复杂的通信细节。

🚀 它如何赋能你的开发?

  1. 极致的开发体验: 获得完全“本地化”的函数调用体验,智能提示(IDE)也能更好地工作。
  2. 统一的错误处理: try...catch 可以同时捕获网络异常、云函数执行失败、服务端业务逻辑抛出的错误,让你的错误处理逻辑空前统一和健壮。
  3. 类型友好: 虽然是动态调用,但其清晰的结构对 TypeScript 非常友好,你可以轻松地为你的 RPC 接口添加类型定义。
  4. 支持复杂应用: 你的应用是不是像“工具箱”一样,有多个领域的云函数入口(如 rpc-pdf, rpc-image)?没问题!rpc-client-tcb 支持创建多个实例,让你的客户端架构同样清晰。

立即体验丝滑

在你的小程序项目根目录下,安装它:

npm install rpc-client-tcb

然后,构建 NPM,并开始享受这魔法般的开发体验吧!

rpc-server-tcb + rpc-client-tcb,我们为你提供了一套从云端到小程序端的完整 RPC 解决方案,旨在将开发体验提升到新的高度。

现在就去试试吧,我们保证,一旦用上,你将再也回不去了。

NPM 地址: https://www.npmjs.com/package/rpc-client-tcb

小程序示例片段: https://developers.weixin.qq.com/s/BlGqopmS8B45

最后一次编辑于  11-05  
点赞 1
收藏
评论

1 个评论

  • 秋风鹿人
    秋风鹿人
    2天前

    我去,这简直就是magic,大大缩减了代码量,可读性明显提升【赞】

    2天前
    赞同
    回复 1
    • 李先生
      李先生
      2天前
      我们做得帮小忙工具箱小程序,里面有一百多个工具,就是用这种方式组织代码的,代码非常清晰
      2天前
      回复
登录 后发表内容