Skip to content

infra-fe/rapper

Repository files navigation

[![MIT License][license-shield]][license-url] npm version npm downloads

Logo

一个自带类型的请求库

文档

Rapper 是什么?

Rapper 是 TypeScript 的最佳拍档,它可以帮你生成具有类型定义的请求方案。

  • 无需自行书写请求代码,把 HTTP 接口当做函数调用
  • 请求参数/返回数据类型化,静态校验、自动补全快到飞起
  • 对 React/Redux 特别优化,提供全局数据方案,hooks 轻松使用

来自阿里的 THX 团队

十年前我们创立了 Rap 项目,如今已经有相当多的用户在 Rap 中管理接口文档和 Mock 数据。

Rapper 在此基础上更进一步,利用这些已经录入的接口数据为你生成 TypeScript 类型定义以及配套的数据请求方案,让你在代码开发中省去重复的劳动。

快速开始

  1. 进入仓库,点击配置「生成 TS 代码」

install

  1. 按照指引把 Rapper 安装到项目中

  2. 执行 npm run rapper 生成代码

  3. 引入生成的 fetch 函数,调用它就能发起请求并返回带有类型的响应数据

// 从生成的代码中引入 fetch
import { fetch } from './rapper';
// 直接使用 fetch 调用请求函数,能获得请求/返回类型校验/提示
(async function() {
  // alt+点击可以查看接口信息
  const res = await fetch['GET/example/rapper']({
    foo: '123',
  });
  const nameList = res.taskList.map(e => e.name);
})();

友好的类型约束/提示

smart

随时跳转到 Rap 查看接口文档

jump

在 React/Redux 场景下强大的数据管理方案

如果你使用 React 和 Redux,在以上基础的请求函数之外,Rapper 还为你提供精心设计过的全局数据管理方案。

以往发送一个请求要写繁杂的 interface/action/reducer/effect,现在这些都会为你准备好,你只需要一行代码即可:

const [responseData, { isPending, errorMessage }] = useAPI['GET/duck/fetchColor'](requestParams);

文档

想要在生产中深度使用 Rapper,你可能还需要自定义请求函数、对返回的数据做统一的类型转换

具体请参考我们的文档:https://www.yuque.com/rap/rapper

联系我们

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published