likes
comments
collection
share

最简单的前后端通信方案！简直是魔法！

作者站长头像
站长
· 阅读数 51

你还在折腾axios和http错误码吗？你还在为了三个接口用复杂的API框架express吗？为什么前后端数据通信就不能简单一点呢？能不能在后端定义一个函数，在前端直接调用它呢？可以！

隆重介绍SRPC！为了化简在微应用等场景下前后端通信的代码复杂度，我们对http请求进行了高层次封装，同时也标准化了阿里云函数计算等serverless平台的接口通信。让我们来体验一下它怎么使用。

项目仓库：github.com/yzITI/srpc

服务端

首先我们来做Nodejs服务端：把项目仓库中的server-node.js放在代码根目录下，然后在它旁边创建index.js，代码如下：

const srpc = require('./server-node.js')
srpc.hello = msg => { // 定义函数
  console.log(msg)
  return 'Hi from server!'
}
srpc() // 启动服务端

没错！只有6行代码，没有任何依赖，直接运行就可以启动服务端：

node index.js

客户端

现在我们来做浏览器上的客户端。

如果你使用的是原生JS，可以在HTML的<head>元素中引入客户端window.srpc：

<script src="https://cdn.jsdelivr.net/gh/yzITI/srpc@main/client.js"></script>

如果你使用了bundler构建ESM的项目，你可以将项目仓库中的client-es.js复制到你的项目中，然后使用import导入：

import srpc from './client-es.js'

无论使用哪种方式导入，使用方法都是一样的：

srpc('http://localhost:11111/') // 指定服务端位置
srpc.hello('This is client!')
  .then(console.log)

没错！又是三行代码，如果服务端地址配置正确，服务端也在启动状态，你就可以在web控制台上看到Hi from server!，在服务端控制台上看到This is client!了！

这说明什么呢？说明客户端调用函数时传入的参数，已经通过网络传输到了服务端，函数在服务端上被执行，并将函数的返回值发回了前端！但是，在写代码时，有关网络的一切你都不需要管，你只需要像往常一样编写函数，并调用函数即可。srpc就像是一个自动沟通前后端的桥梁，只需要你把函数定义在服务端的srpc对象上，客户端的srpc就可以调用！

注意事项

  1. 服务端默认的监听端口是11111。
  2. 无论是客户端还是服务端，srpc都没有任何依赖库！
  3. 无论服务端函数是否异步，客户端调用时一定是Promise返回，因为调用过程存在网络通信。
  4. 函数可以有任意多个参数。
  5. 函数的参数和返回值必须是可以被JSON格式化的数据，因为网络通信使用了JSON数据格式。
  6. 在服务端上定义函数时允许嵌套！即你可以定义如下函数：
srpc.student = {}
srpc.student.getProfile = id => {
  // get student profile
  return profile
}

前端可以直接调用：

srpc.student.getProfile(id)
  1. 函数不存在或网络请求失败时，客户端会抛出错误。
  2. 客户端和服务端都有更多配置，可以配置端口、钩子函数等等，请参考项目仓库中的说明。
  3. 我们还支持阿里云函数计算的服务端和Nodejs的客户端，请参考项目仓库。

希望能帮到你！

转载自:https://juejin.cn/post/7231944822100820026
评论
请登录