Skip to content

sunxiyin/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. 如果你还没使用过 Rap,请先去我们的官方站点:http://rap2.taobao.org/ 注册一个账户并新建一个仓库,再向下进行。

  2. 进入仓库,点击配置「生成 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

联系我们

Packages

No packages published

Languages

  • TypeScript 95.8%
  • JavaScript 2.5%
  • HTML 1.2%
  • CSS 0.5%