如何在 gRPC Web 中使用 async/await 模式？

Question

我正在开发一个 Vue.js 网络应用程序，我正在使用 gRPC 来确保通信。

在前端，我使用的是网页版 gRPC：grpc-web。

一切正常；但是，当我在我的商店中进行 API 调用时，例如：

async fetchEcho() {
    const echoService = new EchoServiceClient('http://localhost:8080', null, null);

    const request = new EchoRequest();
    request.setMessage('Hello World!');

    const call = echoService.echo(request, {'custom-header-1': 'value1'},
      (err: grpcWeb.Error, response: EchoResponse) => {
        console.log(response.getMessage());
    });
}

在我的 Vue 文件中进行调用时如何使用 async/await 模式，例如：

await fetchEcho();
// ...

并等待 API 调用完成以恢复我的程序进程？

谢谢！

Answer 1

我正在使用 ServicePromiseClient，示例如下所示：

const echoServiceClient = new EchoServicePromiseClient("http://localhost:8080", null, null);

然后我就可以像这样创建用于获取的异步函数：

async function fetchEcho() {
    const echoReq = new EchoRequest();
    echoReq.setMessage("Hello world!");
    try {
        const response = await echoServiceClient.echo(echoReq, {});
        return response;
    } catch (error) {
        console.log(error);
        return null;
    }
}

如何在 gRPC Web 中使用 async/await 模式？

How to use async/await pattern with gRPC Web?

async-await

typescript

vue.js

grpc

grpc-web