😈换一种方式对工程中的Api进行封装吧（fashion-axios）

概要

灵感源于Nest.js,于是想在前端基于axios实现一个可以使用装饰器的网络请求库。

设计动机

像 Angular、Nest 等不论前端框架还是Node.js服务端框架中都是装饰器的重度使用者，尤其是 Nest 中的 RequestDecorator 与前端工程中的Api模块是不是非常类似？

所以我在想，如果在管理Api时也将此模式使用起来，对于前端er代码看起来是不是很fashion 😎。

并且基于装饰器我们能够快速优雅的复用逻辑，提供注释一般的解释说明效果。

实现原理

通过装饰器并使用Reflect Metadata给类、类方法、参数声明 metadata，然后运行的时候通过这些元数据来实现依赖的扫描，对类方法实现重写。当然它还处于一个草案的阶段，还需要引入 Reflect Metadata 的包做 polyfill。

文档见 reflect-metadata

代码仓库：fashion-axios

设计细节

在开始前，你需要确保在tsconfig.json 或者jsconfig.json 中设置了experimentalDecorators与emitDecoratorMetadata为true。

基础配置

要方便使用，基础配置是很重要的，与axios配置项基本一致。

进行基础配置支持两种类型的配置，支持全局有一个或多个请求实例，声明多个时需要指定实例名称。

import { defineConfig } from 'fashion-axios'

defineConfig({
  baseURL: '',
  headers: {}
  
  // ...more
})

defineConfig([
  {
  	baseURL: '',
  	headers: {}
        
        // ...more
  },{
        name: '',
  	baseURL: '',
  	headers: {}
        
        // ...more
  }
])

类装饰器

使用它来装饰接口路径前缀及不同的请求实例。

@Api

作为接口路径,为了方便清晰的区分来自不同的模块,可以采用不同模块名作为借口路径前缀（当然这得后端同学去做规范）。例如：用户模块：/user/xxx 权限模块：/permission/xxx

import { Api } from 'fashion-axios'

@Api('/user')
class UserApi {

}

@Client

当需要两个不同实例去做请求处理时，需要使用基础配置时的name指定要使用哪个实例。

import { Api } from 'fashion-axios'

@Client('name')
@Api('/user')
class UserApi {

}

方法装饰器

请求任何Api服务，需要知道方法是必要的，它需要提供各种请求方法（get、post、put...）。

import { Api, Get, Post } from 'fashion-axios'

@Api('/user')
class UserApi {
    @Post('/add')
    add(): Type { }
    
    @Get('/list')
    list(): Type { }
    
    // ...more
    // @Put @Delete
}

参数装饰器

指定请求入参的类型。

import { Api, Get, Post, Body, Query } from 'fashion-axios'

@Api('/user')
class UserApi {
    @Post('/add')
    add(@Body() body: Type): Type { }

    @Post('/update/:id')
    update(
        @Path('id') id: Type
        @Body() body: Type
    ): Type { }

    @Get('/list')
    list(@Query() params: Type): Type { }
}

结尾

读完这篇文章，我想你应该对fashion-axios有了大概的了解。

是否觉的这种方式对Api封装很fashion呢😎？

是否可以启发你的脑洞并可以将这种 Angular、Nest 这种思想应用到其他对你有帮助的地方呢？

有其他需要帮助可以联系我微信DK573432332