grpc在vue+typescript中集成-我爱编程

当前位置：: 首页; 文章; 前端
详情

grpc在vue+typescript中集成

前端
三生万物
0

看这篇之前，先看下前篇文章：http://fenxianglu.cn/article/285 ，因为这篇是在上篇的基础上实现的

至于.d.ts和.ts文件的生成需要看这篇：http://fenxianglu.cn/article/244

生成的ts文件如下：

HelloWorld_pb.d.ts
HelloWorld_pb_service.d.ts

需要安装的依赖包，在创建vue项目的时候选好typescript就集成了

完整.vue文件代码示例：

<template>
  <div>
    {{ computedMsg }}
  </div>
</template>

<script>
import Vue from 'vue';
import Component from 'vue-class-component';

import * as GreeterGRPC from '@/assets/protos/HelloWorld_pb_service'; // 不需要加后缀.d.ts
import * as GreeterPb from '@/assets/protos/HelloWorld_pb'; // 不需要加后缀.d.ts

@Component
export default class Home extends Vue {
  msg = 'Hello world !';

  get computedMsg () {
    return this.msg
  }

  getMsg() {
    let client = new GreeterGRPC.GreeterClient(process.env.VUE_APP_HOST); // 建议http连接

    let helloRequest = new GreeterPb.HelloRequest();
    helloRequest.setName('tom');
    helloRequest.setCity('合肥');

    let metaHeader: any = {}; // 哈哈，一起快乐的any吧

    client.sayHello(helloRequest, metaHeader, (err, response: any) => {
      if(err) {
        console.log(err);
      } else {
        let result = response.toObject();
        this.msg = result.message;
        console.log(result); // {message: "hello tom and city is 合肥"}
      }
    });
  }

  mounted () {
    this.getMsg();
  }
}
</script>

免责申明：本站发布的内容（图片、视频和文字）以转载和分享为主，文章观点不代表本站立场，如涉及侵权请联系站长邮箱：xbc-online@qq.com进行反馈，一经查实，将立刻删除涉嫌侵权内容。