grpc前端promise处理丨技术开发分享录

grpc前端promise处理

{{ detail.nickname }}

转载 翻译 {{ formatTime(detail.create_time) }} 字数 {{ detail.content && detail.content.length }} 阅读 {{ detail.read_num }} {{ formatTag(v) }}

"`.proto`解析的js文件,不仅有传统的Client通过**回调函数实现**,如下:\n\n```\nimport {\n  GreeterClient\n} from '@/assets/protos/HelloWorld_grpc_web_pb.js';\n\nimport { HelloRequest } from '@/assets/protos/HelloWorld_pb.js';\n\nlet client = new GreeterClient('http://localhost:5005');\n\nlet helloRequest = new HelloRequest();\nhelloRequest.setName('tom');\nhelloRequest.setCity('合肥');\n\nconsole.log(helloRequest.toObject()); // {name: \"tom\", city: \"合肥\"}\n\nclient.sayHello(helloRequest, {}, (err, response) => {\n  if(err) {\n    console.log(err);\n  } else {\n    console.log(response.toObject()); // {message: \"hello tom and city is 合肥\"}\n  }\n});\n```\n\n还提供了PromiseClient封装,**通过Promise实现**,如下:\n\n```\nimport {\n  GreeterPromiseClient\n} from '@/assets/protos/HelloWorld_grpc_web_pb.js';\n\nimport { HelloRequest } from '@/assets/protos/HelloWorld_pb.js';\n\nlet client = new GreeterPromiseClient('http://localhost:5005');\n\nlet helloRequest = new HelloRequest();\nhelloRequest.setName('tom');\nhelloRequest.setCity('合肥');\n\nconsole.log(helloRequest.toObject()); // {name: \"tom\", city: \"合肥\"}\n\nlet sayHelloPromise = client.sayHello(helloRequest, {});\nsayHelloPromise.then(response => {\n  console.log(response.toObject()); // {message: \"hello tom and city is 合肥\"}\n});\n```\n\n**使用`aync` `await` 做同步处理**,如下:\n\n```\nimport {\n  GreeterPromiseClient\n} from '@/assets/protos/HelloWorld_grpc_web_pb.js';\n\nimport { HelloRequest } from '@/assets/protos/HelloWorld_pb.js';\n\nlet client = new GreeterPromiseClient('http://localhost:5005');\n\nlet helloRequest = new HelloRequest();\nhelloRequest.setName('tom');\nhelloRequest.setCity('合肥');\n\nconsole.log(helloRequest.toObject()); // {name: \"tom\", city: \"合肥\"}\n\n(async function () {\n  let sayHelloResponse = await client.sayHello(helloRequest, {});\n  console.log(sayHelloResponse.toObject()); // {message: \"hello tom and city is 合肥\"}\n})();\n```\n\n**一次小试验:**\n\n以前都是按照官方说明来处理grpc的,没有深究其实现,现在才发现`HelloWorld_grpc_web_pb.js`和`HelloWorld_pb.js`提供的方法都是一样的\n\n![image.png](/images/articles/image20200910094847.png)\n\n索性单独使用了一下,结果`HelloWorld_grpc_web_pb.js`能够单独实现,但`HelloWorld_pb.js`不行,报`GreeterPromiseClient`不是一个构造方法,猜想`HelloWorld_pb.js`依赖于`HelloWorld_grpc_web_pb.js`,是对其的一种引用,所以才报错。\n\n```\nimport * as GreeterGRPC from '@/assets/protos/HelloWorld_grpc_web_pb.js';\n\nlet client = new GreeterGRPC.GreeterPromiseClient('http://localhost:5005');\n\nlet helloRequest = new GreeterGRPC.HelloRequest();\nhelloRequest.setName('tom');\nhelloRequest.setCity('合肥');\n\nconsole.log(helloRequest.toObject()); // {name: \"tom\", city: \"合肥\"}\n\n(async function () {\n  let sayHelloResponse = await client.sayHello(helloRequest, {});\n  console.log(sayHelloResponse.toObject()); // {message: \"hello tom and city is 合肥\"}\n})();\n```\n\n> 注:这个试验没结过实际生产验证,所以可能会存在问题,建议按 [grpc-web](https://www.npmjs.com/package/grpc-web) 文档来"
PS:写作不易,如要转裁,请标明转载出处。

如果此篇对您有帮助,可小额赞助,以兹鼓励!

猜你想看