前端的全栈之路Meteor篇(四):RPC方法注册及调用-更轻量的服务接口提供方式

本文涉及的产品
无影云电脑个人版,1个月黄金款+200核时
无影云电脑企业版,8核16GB 120小时 1个月
轻量应用服务器 2vCPU 1GiB,适用于搭建电商独立站
简介: RPC机制通过前后端的`callAsync`方法实现了高效的数据交互。后端通过`Meteor.methods()`注册方法,支持异步操作;前端使用`callAsync`调用后端方法,代码更简洁、易读。本文详细介绍了Methods注册机制、异步支持及最佳实践。

在Meteor3.0中,RPC(远程过程调用)机制是实现前后端数据交互的重要特性。通过RPC,前端可以轻松调用后端方法(Methods)并获取数据,而后端的逻辑也可以同步或异步执行并返回结果。本文将详细介绍Meteor 3.0中的Methods注册机制及前后端的callAsync方法。
而远程方法调用,没有了http一类的复杂协议头/版本等,非常适合做成serverless模式

前文提要:开发环境的搭建 -全局安装或使用容器镜像容器化开发环境下的meteor工程架构解析运行在浏览器端的NoSQL数据库副本-MiniMongo介绍及其前后端数据实时同步示例

一 后端Methods的注册

在Meteor 3.0中,后端的Methods是通过Meteor.methods()进行注册的。每个Method都可以被客户端调用,并且后端会自动处理这些调用。典型的Method注册过程如下:

Meteor.methods({
   
  'methodName': function (param1, param2) {
   
    // 在方法内使用 `this` 来获取当前上下文
    const userId = this.userId;  // 获取调用者的用户ID

    // 执行一些业务逻辑
    if (!userId) {
   
      throw new Meteor.Error('not-authorized');
    }

    return `Hello ${
     param1}, you passed ${
     param2}`;
  }
});

this 相关

  • 在方法内,this指向调用上下文,主要用于访问一些与当前用户和调用相关的状态。例如,this.userId可以获取调用方法的用户ID,this.connection可以访问与客户端的连接信息。

this.connection可以用于存储少量的session级别数据,但不推荐,仅仅在需要做清理工作的时候有必要,如果不精通尽量少用

  • this只在非箭头函数中生效,因此需要特别注意在Method中避免使用箭头函数,确保可以正确获取上下文。

异步支持(async/await

  • 在Meteor 3.0中,Methods也可以注册为异步函数,通过使用asyncawait实现异步逻辑。这使得后端在处理复杂的异步操作时更加方便,减少回调的嵌套。
Meteor.methods({
   
  'asyncMethodName': async function (param1) {
   
    // 使用 this.userId 获取用户信息
    const userId = this.userId;

    if (!userId) {
   
      throw new Meteor.Error('not-authorized');
    }

    // 异步操作,等待数据库查询结果
    const result = await someAsyncFunction(param1);

    return result;
  }
});

通过使用async/await,可以在Method中轻松处理异步操作,避免传统回调地狱的问题,同时提升代码的可读性。

二 前端调用:callAsync

在Meteor 3.0中,前端调用后端Method的传统方式是通过Meteor.call,而新引入的callAsync方法则提供了更加现代化的Promise支持,让前端代码更符合异步编程的趋势。

传统调用:Meteor.call

Meteor.call('methodName', param1, param2, (error, result) => {
   
  if (error) {
   
    console.error('Error calling method:', error);
  } else {
   
    console.log('Result from method:', result);
  }
});

这种方式通过回调函数处理结果或者错误,虽然有效,但对于复杂逻辑嵌套的情况来说,代码不够简洁。

新的异步调用:callAsync

callAsync方法返回的是一个Promise,因此可以与async/await结合使用,简化异步调用的逻辑。

async function fetchData() {
   
  try {
   
    const result = await Meteor.callAsync('asyncMethodName', param1);
    console.log('Result:', result);
  } catch (error) {
   
    console.error('Error:', error);
  }
}

相比传统的回调方法,callAsync的优势在于:

  1. 更简洁的代码结构:通过async/await处理异步逻辑,代码更加直观。
  2. 统一的错误处理:可以使用try...catch来捕获错误,避免回调地狱。
  3. Promise链支持:也可以利用thencatch链式调用,提升灵活性。

三 后端调用:Meteor.callAsync

不仅前端可以使用callAsync,在Meteor 3.0中,后端也可以通过Meteor.callAsync来调用其他Methods。这在需要跨方法调用时非常有用。

Meteor.methods({
   
  'methodA': async function () {
   
    const result = await Meteor.callAsync('methodB', someParam);
    return result;
  },

  'methodB': function (param) {
   
    return `You passed ${
     param}`;
  }
});

这种方式允许在一个Method中异步调用另一个Method,使得后端逻辑更加灵活,同时避免了复杂的嵌套回调。

四 最佳实践

在实际的开发过程中,我们注册一个接口(类似定义一个http的路径),前端再去调用,如果都是字符串的形式,有时候就容易出现对齐错误的问题,为了避免这种问题发生,我们实际上可以前后端共享一个对象结构,保证修改时,一次搞定两端。

例如创建一个methodNames.js文件,这个文件不适用任何api,只导出一个对象,用于映射方法名,它便可以在浏览器以及nodejs都可用。

export const MethodNames = {
   
   complexName1: 'complex-ns-1',
   otherMethodNew: 'other-deel-2'
}

注册方法的时候就使用这个对象:

// server.js
Meteor.methods({
   
    [MethodNames.complexName1]: async function(...args){
   },
    [MethodNames.otherMethodNew]: async function(...args){
   }
})

前端调用也导入这个文件:

Meteor.callAsync(MethodNames.complexNamep1).then()
Meteor.callAsync(MethodNames.otherMethodNew, arg1,arg2).then()

这样就可以随时修改实际上的方法名了,一次修改前后端都改了。

需要注意的是,看上去前后端混合了,实际上并不是,只是这个文件在前端和后端分别构建的时候,同样的代码被打包到了前端和后端的构建物里面。

五 总结

Meteor 3.0中引入的异步支持和callAsync方法,使得开发者在处理前后端数据交互时更加轻松。核心的RPC机制通过后端Methods注册、上下文访问(this)、以及异步支持,使得业务逻辑的实现变得更加直观。而前后端的callAsync方法进一步提升了代码的可读性和维护性,让开发者可以在异步编程中获益更多。

相关文章
|
19天前
|
JSON 前端开发 JavaScript
前端工具方法整理
前端工具方法整理
38 8
|
5月前
|
Dart 前端开发
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
179 75
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
2月前
|
监控 前端开发 小程序
陪练,代练,护航,代打小程序源码/前端UNIAPP-VUE2.0开发 后端Thinkphp6管理/具备家政服务的综合型平台
这款APP通过技术创新,将代练、家政、娱乐社交等场景融合,打造“全能型生活服务生态圈”。以代练为切入点,提供模块化代码支持快速搭建平台,结合智能匹配与技能审核机制,拓展家政服务和商业管理功能。技术架构具备高安全性和扩展性,支持多业务复用,如押金冻结、录屏监控等功能跨领域应用。商业模式多元,包括交易抽成、增值服务及广告联名,同时设计跨领域积分体系提升用户粘性,实现生态共生与B端赋能。
176 12
|
7月前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
137 1
|
4月前
|
JSON 前端开发 测试技术
大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
171 10
大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
|
4月前
|
JSON 前端开发 API
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
150 5
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
|
6月前
|
人工智能 自然语言处理 前端开发
从0开始打造一款APP:前端+搭建本机服务,定制暖冬卫衣先到先得
通义灵码携手科技博主@玺哥超carry 打造全网第一个完整的、面向普通人的自然语言编程教程。完全使用 AI,再配合简单易懂的方法,只要你会打字,就能真正做出一个完整的应用。
10958 29
|
5月前
|
缓存 前端开发 Android开发
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
257 12
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
|
5月前
|
Dart 前端开发 Android开发
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
116 1
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
5月前
|
缓存 前端开发 IDE
【06】flutter完成注册页面-密码登录-手机短信验证-找回密码相关页面-并且实现静态跳转打包demo做演示-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【06】flutter完成注册页面-密码登录-手机短信验证-找回密码相关页面-并且实现静态跳转打包demo做演示-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
95 0
【06】flutter完成注册页面-密码登录-手机短信验证-找回密码相关页面-并且实现静态跳转打包demo做演示-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈