前言
Rxjs-grpc-ts 是一个用来调用 gRPC API 的 Typescript 包。它常常被用在前端的项目中，以便于在调用远程 API 时能够很好的使用 Reactive Extensions 模式。本文将介绍如何使用该包，以及在前端开发中的应用。
安装
在项目根目录中运行以下命令，安装 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