如何在 gRPC Web 中使用异步/等待模式？

Question

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

在前端，我使用的是 gRPC 的 web 版本： 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;
    }
}

Answer 2

*PromiseClinet 似乎不再生成。 取而代之的是一个带有签名的方法，它返回 promise

 search(
    request: microservice_1_test_pb.SearchRequest,
    metadata: grpcWeb.Metadata | null): Promise<microservice_1_test_pb.SearchResponse>;

  search(
    request: microservice_1_test_pb.SearchRequest,
    metadata: grpcWeb.Metadata | null,
    callback: (err: grpcWeb.RpcError,
               response: microservice_1_test_pb.SearchResponse) => void): grpcWeb.ClientReadableStream<microservice_1_test_pb.SearchResponse>;

使用第一个

    try {
      let response = await this.searchService.search(searchRequest, {})
      this.responseData.data = response.getSearchResponse()

    } catch (error) {
      console.log("Got error from server: grpcWeb.RpcError).message-->", (error as grpcWeb.RpcError).message)
      this.responseData.error = (error as grpcWeb.RpcError)

    }