我的文档库

多根目录侧边栏

flex-layout

  • Getting Started

  • Guides

  • Reference

typed-rx-http

  • Getting Started

  • Guides

  • Reference

global-rx-state

  • Getting Started

  • Guides

  • Reference

webflux-fe-dev-assistant

reactive-mongo-dsl

概述

用于 TypeScript 的基于 RxJS 的类型安全 HTTP 客户端和可选的 Next.js/RSocket 适配器

@byeolnaerim/typed-rx-http是一个 HTTP 客户端,通过注入 OpenAPI 风格的路径类型来检查 URL、HTTP 方法、路径/查询参数和请求体的类型,并将结果作为 RxJS Observable 返回。

我在这个库中想要的并不是复杂的 HTTP 抽象,而是直接导入生成的函数并调用,而不是在前端再次编写后端刚刚编写的 URL 和请求/响应 DTO.


Core 基本使用方式

基本流程是准备 OpenAPI 风格的路径类型,必要时创建 HeaderStore,然后通过 createHttpClient<Paths>() 创建客户端并调用 callApi<R>()。自动服务生成器或 WebFlux 后端不是此流程的必需条件。

请求类型由 Paths 决定,响应类型由调用者选择 callApi<R>() 的 R。特定的 ResponseWrapper 也不强制。NDJSON、CSR 缓存、会话认证、Next.js 和 RSocket 功能仅在需要时添加。


起源故事

我在前端使用 Next.js 和 TypeScript,在后端使用 Java 和 WebFlux。由于这个组合,我发现两边重复编写相同内容的情况太多了.

在后端创建实体和请求/响应 DTO 并编写端点。但是在前端调用该端点时,需要重新输入 URL,并且还需要创建与后端 DTO 几乎相同的类型或接口。坦率地说,这与在前端再次编写我在后端编写的内容没有什么不同.

这种重复不仅增加了代码量,而且在一方的字段或 URL 发生变化时,另一方被遗漏的可能性也增加了。因此,我迫切感受到需要将后端的 REST API 规范可预测地生成到前端 HTTP 客户端代码中.

在这个过程中,我在实际项目 nplauction.com 中为后端reactive-mongo-dslwebflux-fe-dev-assistant的原型,首先在前端应用了 typed-rx-http 的原型。typed-rx-http 并不是从一开始就作为一个独立的想法开始的,而是在创建 webflux-fe-dev-assistant 时,顺便为前端需要的部分一起创建的库.


Swagger 自动生成项目中的使用方式

在使用Swagger服务自动生成的项目中, createHttpClient我并不是每次都编写 URL。项目中 commonService.ts创建一个项目拥有的公共HTTP适配器,只需导入OpenAPI生成的服务函数即可。commonService.ts不是库生成的文件名,而是项目自定义的文件名,可以在开始/HTTP客户端文档中查看完整代码。

const response = await firstValueFrom(
  workplacesSearch({ params: { keyword: "kim" } }),
);

上述代码中没有 URL 字符串或手动编写的响应接口。URL、HTTP 方法、参数类型和响应类型包含在生成的服务中。一次响应是通过 firstValueFrom接收的,而像工作进度这样的多个值的请求可以通过subscribe接收。


在哪里最合适呢

如果后端和前端是分开的,并且后端可以提供有效的swagger.json,则可以减少 TypeScript 前端的重复工作。如果使用 Java WebFlux 功能端点,可以结合 webflux-fe-dev-assistant 从文档生成到服务生成的过程。

typed-rx-http Core不依赖于WebFlux。与后端实现无关,兼容OpenAPI规范的TypeScript paths 如果有类型,可以减少每次手动编写字符串URL和请求类型的工作。RSocket客户端可以直接在/rsocket入口点使用,只有在需要路由/请求/响应服务自动生成的项目中,才能额外使用AsyncAPI生成器。

仓库: github.com/joohyoungkim19940805/typed-rx-http

© 2026 Byeolnaerim. 保留所有权利.介绍隐私政策