api-generator

基于typescript与axios的 API 接口方法生成器

特性

• Restful API 规范实现
• 强制使用者为接口提供入参与出参的 ts 类型
• 自动生成一个基于 axios 调用的接口函数
• 自定义使用场景

如何使用

1. 定义 api

// service.ts
import apiGenerator from '@kuimo/api-generator';

interface GetListParams {
  pageNo: number;
  pageSize: number;
  searchKey?: string;
}

interface Item {
  name: string;
}

interface PagingData<T> {
  list: T[];
  total: number;
}

export const getList = apiGenerator<(p: GetListParams) => PagingData<PACKAGE.PackageDef>>({
  api: '/api/getList',
});

2. 调用接口

// page.tsx
import { getList } from './service';

...
const fetchData = async () => {
   const list = await getList({ pageNo, pageSize });
   return list;
}
...

配置

api

接口url字符串。

支持参数匹配，通过:param的形式做匹配，运行时会自动将参数填入url中

export const submitData = apiGenerator<(p: { id: string }) => void>({
  api: '/api/submit/:id',
});

method

默认为GET, 如果是get请求可以省略

$options

在运行时使用接口时，可以传入一个$options参数，来处理特殊场景

successMsg/ErrorMsg

传入一个成功或失败的字符串，提供自动信息提示。前提：需要调用initApiGenerator来注册成功失败行为

const submitData = async () => {
  await postData({ params, $options: { successMsg: '操作成功' } });
};

isMultipart

当请求类型是multipart/form-data时，使用$options: { isMultipart: true } 只需要传入kv对象即可，生成方法里会自动包装formData

rawResponse

当需要拿到最原始的axios返回体时，使用$options: { rawResponse: true }， 即可或者原始返回

axiosConfig

支持传入任意 axios request 参数，用于特殊场景或覆盖默认配置

// 例如得到监听上传进程的回调
const submitData = async () => {
   await postData({ params, $options: { axiosConfig: axiosConfig: {
        onUploadProgress: (e: ProgressEvent) => onProgress({ loaded: e.loaded, total: e.total }),
     }} 
   });
}

initApiGenerator

初始化方法，在项目入口使用

onSuccess/onError

指定成功或失败请求的回调操作

dataPropertyName

大多数时候，我们都会有一个统一的接口返回结构体，如:

{
    code: number;
    data: T;
    error?: string;
}

而我们一般只关注实际的数据返回，即上面的data部分，可以使用dataPropertyName来指定数据属性，这样返回的结果就只有数据部分了

import { initApiGenerator } from '@kuimo/api-generator';

initApiGenerator({
  onSuccess: (message: string) => Toast.success(message),
  dataPropertyName: 'data',
});