封装装饰器

基本介绍

前面已经介绍过子项装饰器能够让我们的配置更加清晰，但是子项装饰器仍然不能解决配置冗长的情况。比如如下情况：

@HttpApi('http://localhost:3000/users/')
class UserApi {
  @Post({
    url: '/',
    transformRequest: [
      data => {
        data.email = '1111@11.com';
        return data;
      },
    ],
  })
  @TransformRequest([
    // 为user添加属性sex
    data => {
      data.sex = '男';
      return JSON.stringify(data);
    },
  ])
  createUser(@BodyParam() user: { name: string; age: number }): any {}
}
const { data } = await new UserApi().createUser({ name: 'test', age: 18 });
console.log(data);

看起来是不是十分恶心？为了解决这个问题，awe-axios允许封装自定义装饰器的功能。比如：

/**
 * 自定义装饰器
 * @param config 配置
 */
function CustomPost(config: HttpMethodDecoratorConfig<any>) {
  config.transformRequest = [
    data => {
      data.email = '1111@11.com';
      return data;
    },
    data => {
      data.sex = '男';
      return JSON.stringify(data);
    },
  ];
  return Post(config);
}
@HttpApi('http://localhost:3000/users/')
class UserApi {
  @CustomPost({
    url: '/',
  })
  createUser(@BodyParam() user: { name: string; age: number }): any {}
}
const { data } = await new UserApi().createUser({ name: 'test', age: 18 });
console.log(data);

你看现在是不是好了很多

最佳实践

你甚至可以为你的项目封装一套装饰器，使用时将他们导入即可，这样能组合式的复用他们了，让你的代码更加简洁。

封装文件上传post

function FileUp(config: HttpMethodDecoratorConfig) {
  config.headers = {
    'Content-Type': 'mutilpart/form-data',
  };
  return Post(config);
}

封装Data解析器

// 只获取响应数据的data部分
function ExtractData() {
  return TransformResponse(() => (data: any) => data.data);
}

使用

@HttpApi('http://localhost:3000/users/')
class UserApi {
  @FileUp({ url: '/upload' })
  @ExtractData()
  avaterUpload(@BodyParam() form: FormData): any {}
}
const form = new FormData();
form.append('file', new File(['test'], 'test.txt'));
const { data } = await new UserApi().avaterUpload(form);
console.log(data);

配置项

当然自定义装饰器你需要建立在已有的装饰器之上，所以你需要了解一下已有装饰器的配置项，下面仅列举一些常用的配置项。

1. HttpMethodDecoratorConfig：所有的HTTP方法装饰器的通用配置，比如@Get、@Post、@Put、@Delete等装饰器都继承了这个配置。
2. MockConfig: @Mock装饰器配置，这将在下一章节介绍。
3. ...

这些配置项你其实可以借助IDE工具点击去查看