vue中使用protobuf的过程记录

protobuf.load("awesome.proto", function(err, root) {...})
protobuf.load("awesome.json", function(err, root) {...})

// /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('school.pbstudentlistreq', params)
 return request('getstudentlist', req, 'school.pbstudentlistrsp')
}

// 在helloworld.vue中使用
import { getstudentlist } from '@/api/student'
export default {
 name: 'helloworld',
 created () {

 },
 methods: {
 _getstudentlist () {
  const req = {
  limit = 20,
  offset = 0
  }
  getstudentlist(req).then((res) => {
  console.log(res)
  }).catch((res) => {
  console.error(res)
  })
 }
 }
}

// user.proto
package framework;
syntax = "proto3";

message pbuser {
 uint64 user_id = 0;
 string name = 1;
 string mobile = 2;
}

// class.proto
package school;
syntax = "proto3";

message pbclass {
 uint64 classid = 0;
 string name = 1;
}

// student.proto
package school;
syntax = "proto3";

import "user.proto";
import "class.proto";

message pbstudent {
 uint64 studentid = 0;
 pbuser user = 1;
 pbclass class = 2;
 pbstudentdegree degree = 3;
}

enum pbstudentdegree {
 primary = 0; // 小学生
 middle = 1; // 中学生
 senior = 2; // 高中生
 college = 3; // 大学生
}

message pbstudentlistreq {
 uint32 offset = 1;
 uint32 limit = 2;
}

message pbstudentlistrsp {
 repeated pbstudent list = 1;
}


// messagetype.proto
package framework;
syntax = "proto3";
// 公共请求体
message pbmessagerequest {
 uint32 type = 1;       // 消息类型
 bytes messagedata = 2;      // 请求数据
 uint64 timestamp = 3;      // 客户端时间戳
 string version = 4;       // api版本号

 string token = 14;       // 用户登录后服务器返回的 token，用于登录校验
}

// 消息响应包
message pbmessageresponse {
 uint32 type = 3;       // 消息类型
 bytes messagedata = 4;      // 返回数据

 uint32 resultcode = 6;      // 返回的结果码
 string resultinfo = 7;      // 返回的结果消息提示文本（用于错误提示）
}
// 所有的接口
enum pbmessagetype {
 // 学生相关
 getstudentlist = 0;       // 获取所有学生的列表, pbstudentlistreq => pbstudentlistrsp
}

# vue create vue-protobuf
# npm install axios protobufjs --save-dev

npx pbjs -t json src/proto/*.proto > src/proto/proto.json

npx pbjs -t json-module -w commonjs -o src/proto/proto.js src/proto/*.proto

"scripts": {
 "serve": "vue-cli-service serve",
 "build": "vue-cli-service build",
 "lint": "vue-cli-service lint",
 "proto": "pbjs -t json-module -w commonjs -o src/proto/proto.js src/proto/*.proto"
 },

import axios from 'axios'
const httpservice = axios.create({
 timeout: 45000,
 method: 'post',
 headers: {
 'x-requested-with': 'xmlhttprequest',
 'content-type': 'application/octet-stream'
 },
 responsetype: 'arraybuffer'
})

import protoroot from '@/proto/proto'
import protobuf from 'protobufjs'
// 请求体message
const pbmessagerequest = protoroot.lookup('framework.pbmessagerequest')
// 响应体的message
const pbmessageresponse = protoroot.lookup('framework.pbmessageresponse')
const apiversion = '1.0.0'
const token = 'my_token'
function getmessagetypevalue(msgtype) {
 const pbmessagetype = protoroot.lookup('framework.pbmessagetype')
 const ret = pbmessagetype.values[msgtype]
 return ret
}
/**
 * 
 * @param {*} msgtype 接口名称
 * @param {*} requestbody 请求体参数
 * @param {*} responsetype 返回值
 */
function request(msgtype, requestbody, responsetype) { 
 // 得到api的枚举值
 const _msgtype = getmessagetypevalue(msgtype)
 // 请求需要的数据
 const reqdata = {
 timestamp: new date().gettime(),
 type: _msgtype,
 version: apiversion,
 messagedata: requestbody,
 token: token
 }
}
 // 将对象序列化成请求体实例
 const req = pbmessagerequest.create(reqdata)
 // 调用axios发起请求
 // 这里用到axios的配置项：transformrequest和transformresponse
 // transformrequest 发起请求时，调用transformrequest方法，目的是将req转换成二进制
 // transformresponse 对返回的数据进行处理，目的是将二进制转换成真正的json数据
 return httpservice.post('/api', req, {
 transformrequest,
 transformresponse: transformresponsefactory(responsetype)
 }).then(({data, status}) => {
 // 对请求做处理
 if (status !== 200) {
  const err = new error('服务器异常')
  throw err
 }
 console.log(data)
 },(err) => {
 throw err
 })
}
// 将请求数据encode成二进制，encode是proto.js提供的方法
function transformrequest(data) {
 return pbmessagerequest.encode(data).finish()
}
function isarraybuffer (obj) {
 return object.prototype.tostring.call(obj) === '[object arraybuffer]'
}
function transformresponsefactory(responsetype) {
 return function transformresponse(rawresponse) {
 // 判断response是否是arraybuffer
 if (rawresponse == null || !isarraybuffer(rawresponse)) {
  return rawresponse
 }
 try {
  const buf = protobuf.util.newbuffer(rawresponse)
  // decode响应体
  const decodedresponse = pbmessageresponse.decode(buf)
  if (decodedresponse.messagedata && responsetype) {
  const model = protoroot.lookup(responsetype)
  decodedresponse.messagedata = model.decode(decodedresponse.messagedata)
  }
  return decodedresponse
 } catch (err) {
  return err
 }
 }
}
// 在request下添加一个方法，方便用于处理请求参数
request.create = function (protoname, obj) {
 const pbconstruct = protoroot.lookup(protoname)
 return pbconstruct.encode(obj).finish()
}
// 将模块暴露出去
export default request

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(...)
}

<template>
 <div class="hello">
 <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>