最简单的前后端通信方案！简直是魔法！
站长
· 阅读数 16
你还在折腾axios和http错误码吗？你还在为了三个接口用复杂的API框架express吗？为什么前后端数据通信就不能简单一点呢？能不能在后端定义一个函数，在前端直接调用它呢？可以！
隆重介绍SRPC！为了化简在微应用等场景下前后端通信的代码复杂度，我们对http请求进行了高层次封装，同时也标准化了阿里云函数计算等serverless平台的接口通信。让我们来体验一下它怎么使用。
服务端
首先我们来做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就可以调用！
注意事项
- 服务端默认的监听端口是11111。
- 无论是客户端还是服务端，
srpc都没有任何依赖库！ - 无论服务端函数是否异步，客户端调用时一定是Promise返回，因为调用过程存在网络通信。
- 函数可以有任意多个参数。
- 函数的参数和返回值必须是可以被JSON格式化的数据，因为网络通信使用了JSON数据格式。
- 在服务端上定义函数时允许嵌套！即你可以定义如下函数：
srpc.student = {}
srpc.student.getProfile = id => {
// get student profile
return profile
}
前端可以直接调用：
srpc.student.getProfile(id)
- 函数不存在或网络请求失败时，客户端会抛出错误。
- 客户端和服务端都有更多配置，可以配置端口、钩子函数等等，请参考项目仓库中的说明。
- 我们还支持阿里云函数计算的服务端和Nodejs的客户端，请参考项目仓库。
希望能帮到你！