Forget API

无需封装 Axios，无需写接口请求函数，无需维护返回值类型，把这些琐碎重复的事情交给工具来处理，让精力聚焦在核心功能的实现上。

Install

npm i -S forget-api

Usage

以NestJS+Vite技术栈为例，假设目录结构如下：

root/
 │
 ├─ backend/
 │   ├─ src/
 │       ├─ user.controller.ts
 │
 ├─ frontend/
     ├─ tsconfig.json
     ├─ vite.config.ts
     ├─ src/
         ├─ main.ts

在控制器中，利用Mark标记请求参数类型，通过defineExpose暴露 API 方法

// "backend/src/user.controller.ts"
import { defineExpose, Mark } from 'forget-api/nest';

@Controller('user')
export class UserController {
    @Get(':id')
    getUserInfo(@Param() params: Mark<{ id: string }>) {
        return { code: 200, data: { id } };
    }
}

export default defineExpose(UserController);

在frontend/tsconfig.json配置别名映射到后端目录

{
    "compilerOptions": {
        "paths": {
            "@@api/*": ["../backend/src/*"]
        }
    },
}

在 Vite 中引入定制插件对别名进行解析

import { vitePluginForNest } from 'forget-api/nest/vite';

export default defineConfig({
    plugins: [
        vitePluginForNest({
            alias: '@@api',
            baseUrl: 'http://localhost:3000',
        })
    ],
});

在前端调用接口

// "frontend/src/main.ts"
import userApis from '@@api/user.controller';

await userApis.getUserInfo({ id: '123' });
// 发起请求：GET http://localhost:3000/user/123

借助于插件的转换，前端发起请求像是直接调用控制器的方法，使用相同的方法名、参数类型、返回值类型，类似于 RPC

Principle

1. 通过插件监听@@api/相关的模块导入，根据tsconfig.json配置将模块解析成正确的文件路径，并以文本的形式载入；
2. 将上述的文本解析成 TypeScript AST，查找导出的控制器类及其方法和装饰器，生成如下代码：

// "@@api/user.controller"
import { createApis } from 'forget-api/request';
export default createApis('/user', {
    getUserInfo: ['GET', '/:id'],
});

forget-api/request 是对 fetch 的简单封装。