最后写好的具体代码请看： request.js 。 其中用到了 lookup() , encode() , finish() , decode() 等几个proto.js提供的方法。
5. 调用request.js
在.vue文件直接调用api前，我们一般不直接使用request.js来直接发起请求，而是将所有的接口再封装一层，因为直接使用request.js时要指定请求体，响应体等固定的值，多次使用会造成代码冗余。
我们习惯上在项目中将所有后端的接口放在 src/api 的目录下，如针对student的接口就放在 src/api/student.js 文件中，方便管理。 将 getStudentList 的接口写在 src/api/student.js 中
import request from '@/lib/request' // params是object类型的请求参数 // school.PBStudentListReq 是定义好的请求体model // school.PBStudentListRsp 是定义好的响应model // getStudentList 是接口名称 export function getStudentList (params) { const req = request.create('PBStudentListReq', params) return request('getStudentList', req, 'school.PBStudentListRsp') } // 后面如果再添加接口直接以此类推 export function getStudentById (id) { // const req = ... // return request(...) }
6. 在.vue中使用接口
需要哪个接口，就import哪个接口，返回的是Promise对象，非常方便。
<template> <div> <button @click="_getStudentList">获取学生列表</button> </div> </template> <script> import { getStudentList } from '@/api/student' export default { name: 'HelloWorld', methods: { _getStudentList () { const req = { limit: 20, offset: 0 } getStudentList(req).then((res) => { console.log(res) }).catch((res) => { console.error(res) }) } }, created () { } } </script> <style lang="scss"> </style>
总结
整个demo的代码：demo 。
前端使用的整个流程：
1. 将后端提供的所有的proto文件拷进 src/proto 文件夹
2. 运行 npm run proto 生成proto.js
3. 根据接口枚举在 src/api 下写接口
4. .vue 文件中使用接口。
（其中1和2可以合并在一起写一个自动化的脚本，每次更新只需运行一下这个脚本即可）。
写的比较啰嗦，文笔也不好，大家见谅。
这个流程就是我感觉比较好的一个proto在前端的实践，可能并不是最好，如果在你们公司有其他更好的实践，欢迎大家一起交流分享。
后续