Angular项目中如何将gRPC Web的unary调用转换为Promise？

完全可以通过封装Promise的方式把回调形式的gRPC unary调用改为Promise风格，实现如下：

步骤1：封装Promise版调用方法 #

searchUsers(request: SearchRequest, metadata: grpc.Metadata): Promise<SearchReply.AsObject['resultsList']> {
  return new Promise((resolve, reject) => {
    grpc.unary(User.Search, {
      request: request,
      metadata: metadata,
      host: environment.api.gRpcUser,
      onEnd: res => {
        const { status, message, statusMessage } = res;
        if (status === grpc.Code.OK && message) {
          const result = message.toObject() as SearchReply.AsObject;
          // 可根据业务需要调整返回内容
          resolve(result.resultsList ?? []);
        } else {
          reject(new Error(`请求失败，状态码：${status}，错误信息：${statusMessage}`));
        }
      }
    });
  });
}

步骤2：调用示例 #

你可以选择async/await或者then/catch两种方式调用：

async/await写法（更推荐） #

async fetchUsers() {
  this.isLoading = true;
  try {
    const users = await this.searchUsers(你的请求参数, 你的metadata参数);
    // 后续业务逻辑处理
    console.log(users);
  } catch (err) {
    // 错误处理逻辑
    console.error(err);
  } finally {
    // 无论成功失败都重置加载状态
    this.isLoading = false;
  }
}

then/catch写法 #

fetchUsers() {
  this.isLoading = true;
  this.searchUsers(你的请求参数, 你的metadata参数)
    .then(users => {
      // 后续业务逻辑处理
      console.log(users);
    })
    .catch(err => {
      // 错误处理逻辑
      console.error(err);
    })
    .finally(() => {
      this.isLoading = false;
    });
}

注意事项 #

• 可根据业务需求调整Promise resolve的返回值，如需返回完整的查询结果，直接修改resolve内的参数即可
• 异常分支可自定义错误类型，方便上层调用时做分类处理
• 原写法仅在请求成功时重置isLoading状态，会导致请求失败时页面一直处于加载状态，调整后移到finally块处理更稳妥

内容的提问来源于stack exchange，提问作者DisplayName