[英]How to use grpc-web in vue?
我正在尝试在我的 vue 应用程序中使用 grpc-web 客户端,如下所示:
import Vue from "vue";
import App from "./App.vue";
const { Registration, _ } = require("./identity-service_pb.js");
const {
IdentityServicePromiseClient
} = require("./identity-service_grpc_web_pb.js");
const identityService = new IdentityServicePromiseClient(
"http://localhost:9000"
);
const req = new Registration();
req.setGender("male");
req.setInterestList(["A", "B", "C"]);
console.log(req);
console.log(identityService);
identityService.signUp(req, {}).then(function(response) {
console.log(response);
}).catch(function(error) {
console.error(error);
});
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
当应用程序被编译时,编译器会抱怨:
error in ./src/identity-service_pb.js
Module Error (from ./node_modules/eslint-loader/index.js):
/home/developer/js/identity-client/src/identity-service_pb.js
27:1 error 'proto' is not defined no-undef
28:50 error 'proto' is not defined no-undef
30:15 error 'proto' is not defined no-undef
31:20 error 'COMPILED' is not defined no-undef
36:3 error 'proto' is not defined no-undef
48:1 error 'proto' is not defined no-undef
51:15 error 'proto' is not defined no-undef
52:20 error 'COMPILED' is not defined no-undef
57:3 error 'proto' is not defined no-undef
65:1 error 'proto' is not defined no-undef
82:1 error 'proto' is not defined no-undef
83:10 error 'proto' is not defined no-undef
96:1 error 'proto' is not defined no-undef
115:1 error 'proto' is not defined no-undef
117:17 error 'proto' is not defined no-undef
118:10 error 'proto' is not defined no-undef
129:1 error 'proto' is not defined no-undef
141:11 error 'value' is already defined no-redeclare
157:1 error 'proto' is not defined no-undef
159:3 error 'proto' is not defined no-undef
171:1 error 'proto' is not defined no-undef
194:1 error 'proto' is not defined no-undef
203:1 error 'proto' is not defined no-undef
212:1 error 'proto' is not defined no-undef
221:1 error 'proto' is not defined no-undef
231:1 error 'proto' is not defined no-undef
240:1 error 'proto' is not defined no-undef
261:1 error 'proto' is not defined no-undef
262:10 error 'proto' is not defined no-undef
275:1 error 'proto' is not defined no-undef
278:34 error 'proto' is not defined no-undef
294:1 error 'proto' is not defined no-undef
296:17 error 'proto' is not defined no-undef
297:10 error 'proto' is not defined no-undef
308:1 error 'proto' is not defined no-undef
320:11 error 'value' is already defined no-redeclare
320:23 error 'proto' is not defined no-undef
321:32 error 'proto' is not defined no-undef
337:1 error 'proto' is not defined no-undef
339:3 error 'proto' is not defined no-undef
351:1 error 'proto' is not defined no-undef
365:7 error 'proto' is not defined no-undef
375:1 error 'proto' is not defined no-undef
384:1 error 'proto' is not defined no-undef
393:1 error 'proto' is not defined no-undef
395:40 error 'proto' is not defined no-undef
403:1 error 'proto' is not defined no-undef
412:1 error 'proto' is not defined no-undef
421:1 error 'proto' is not defined no-undef
426:29 error 'proto' is not defined no-undef
✖ 50 problems (50 errors, 0 warnings)
如您所见,编译器抱怨自动生成的文件identity-service_pb.js
。
文件结构如下所示:
我究竟做错了什么?
更新
我需要在 vue 应用程序和 golang 应用程序之间使用特使代理吗?
还是 vue app 可以直接和 golang app 通信? 目前,我没有他们之间的特使代理。
我一直在用 Go 使用 react 和 gRPC,我也许可以回答你的问题:
是的,您确实需要在 vue 和您的 grpc 服务器之间使用 envoy-proxy。 Envoy 会将来自浏览器的 HTTP/1.1 调用转换为 gRPC 处理的 HTTP2/ 调用
要解决编译器抱怨自动生成的文件,您可以在文件开头使用/*eslint-disable*/
并绕过它
要调用 gRPC 方法,您需要使用以下格式
service.method(req, metadata, callback)
因此,在您的情况下,您可以执行以下操作:
identityService.signUp(req, {}, async (err, response) => {
const data = await response
console.log(data)
console.log(err)
})
您可能需要google-protobuf
npm 包?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.