前言
Rxjs-grpc-ts 是一个用来调用 gRPC API 的 Typescript 包。它常常被用在前端的项目中，以便于在调用远程 API 时能够很好的使用 Reactive Extensions 模式。本文将介绍如何使用该包，以及在前端开发中的应用。
安装
在项目根目录中运行以下命令，安装 rxjs-grpc-ts：
npm install rxjs-grpc-ts
使用教程
如下是使用 rxjs-grpc-ts 进行远程 API 调用的步骤：
1. 定义你的 proto 文件
proto 是用来定义 gRPC 服务的一种格式。你需要在你的项目中定义你的 proto 文件，并通过 gRPC 工具生成相应的客户端代码。如果你需要用到 TypeScript，建议使用插件 ts-protoc-gen。
我们假设有如下定义：
-- -------------------- ---- ------- ------ - --------- ------- ------- ------- ------- - --- -------- -------------- ------- ------------ -- - ------- ------------ - ------ ---- - -- - ------- ---------- - ------ ------- - -- -展开代码
2. 生成客户端代码
我们需要先使用 gRPC 工具生成客户端代码。具体方式请参考 gRPC 官网。
假设我们已经生成了 greeter/grpc_pb.js 和 greeter/grpc_pb.d.ts 两个文件。
3. 编写客户端代码
现在我们开始使用 rxjs-grpc-ts 进行 API 调用。我们需要先定义 GreeterService 类，这个类负责发出 gRPC 请求并转化得到的结果为 Observable：
-- -------------------- ---- ------- ------ - ---- - ---- ------- ------ - --- - ---- ----------------- ------ - ---- - ---- --------------- ------ - ------ - ---- --------------------- ------------- ------ ----- -------------- - ------- ------------- - --------------------------- -------------------------- ------- -------- - ---------------------------------------------------- ----------------------------------------------- ------------- - ------------------------- - -------------- ------- - ----- ------------ - --- ---------------------- ---------------------------- ------ --------------------------------------- -------------- -- ----------------------- -- - -展开代码
在这个类中，我们首先创建了一个 GreeterService 客户端。然后，我们为 SayHello 请求创建了一个方法。这个方法接受一个 mygrpc.HelloRequest 对象并返回一个 mygrpc.HelloReply 对象。
在调用 sayHello 方法时，我们可以很方便的得到响应：我们首先使用 from 函数将请求转换为了 Observable，接着使用 map 函数来获取响应中的 message 字段。
4. 使用 GreeterService
现在我们可以在我们的 Angular 组件中使用 GreeterService：
-- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------ - -------------- - ---- -------------------- ------------ --------- ----------- --------- --- -------- - ----- ---- -- ------ ----- ------------ - -------- - -------------------------------------- ------------------- --------------- --------------- -- -展开代码
在这个组件中，我们实例化了 GreeterService，并调用 sayHello 方法。然后，我们使用 async 管道将得到的 Observable 订阅到了模板中。
结论
rxjs-grpc-ts 是一个相当方便的工具，它可以简化前端与远程 API 的交互。通过将 gRPC 请求封装在 Observable 中，我们可以方便地应用 Reactive Extensions 模式。此外，Angular 框架也非常适合在这方面中使用。希望本文能对前端开发者熟悉 rxjs-grpc-ts 的使用有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671d730d0927023822c8a
