Awe-Axios

Appearance

参数装饰器 ​

@QueryParams ​

基本使用 ​

@QueryParams 装饰器用于将参数对象转换为查询字符串。如下所示：

ts
@HttpApi({
  baseURL: 'http://localhost:3000/users/',
})
class UserApi {
  @Get('/pages')
  getUserPages(@QueryParam('page') page: number, @QueryParam('size') size: number): any {}
}
const userApi = new UserApi();
// 最终请求地址为http://localhost:3000/users/pages?page=1&size=20
const { data } = await userApi.getUserPages(1, 20);
console.log(data);

装饰器重复与冲突

@QueryParams 装饰器和 @QueryParams、@BodyParams、@PathParams 装饰器不能同时使用。也就是说不能出现以下情况：

ts
getUserPages(@QueryParam('page1')@QueryParam('page') page: number): any {}
// 或者
getUserPages(@PathParam('id') @QueryParam('size') size: number): any {}

实时上awe-axios中大部分的装饰器都不能重复出现，否则会报错。

多参数合并 ​

@QueryParams 装饰器可以将多个同名参数对象合并为一个数组，这样做对于传入数组参数十分有用。如下所示：

ts
@HttpApi({
  baseURL: 'http://localhost:3000/users/',
})
class UserApi {
  @Get('/groups')
  getUserGroups(@QueryParam('ids') id1: number, @QueryParam('ids') id2: number): any {}
}
// 最终请求地址为http://localhost:3000/users/groups?ids[]=2&ids[]=1
const { data } = await userApi.getUserGroups(1, 2);
console.log(data);

@PathParam ​

@PathParam 装饰器用于将参数对象转换为路径参数。如下所示：

ts
@HttpApi({
  baseURL: 'http://localhost:3000/users/',
})
class UserApi {
  @Get('/:id')
  getUserById(@PathParam('id') id: number): any {}
}
// 最终请求地址为http://localhost:3000/users/1
const { data: data3 } = await userApi.getUserById(1);
console.log(data);

上面的例子中，@PathParam 装饰器将 id 参数对象转换为路径参数 1。

@BodyParam ​

基本使用 ​

@BodyParam 装饰器用于收集参数作为请求体参数。如下所示：

ts
@HttpApi({
  baseURL: 'http://localhost:3000/users/',
})
class UserApi {
  @Post('/')
  createUser(@BodyParam('user') user: { name: string; age: number }): any {}
}
// 最终请求地址为http://localhost:3000/users/1
const { data } = await userApi.createUser({ name: 'test', age: 18 });
console.log(data);

单个参数名省略

当 @BodyParam 装饰器只接收一个参数时，data对象会被拍平一层，如下所示：

json
data:{
  "name": "test",
  "age": 18
}
// 而不是
data: {
  "user": {
    "name": "test",
    "age": 18
  }
}

所以单参数的时候awe-axios允许你不写参数名：

ts
@Post('/')
createUser(@BodyParam() user: { name: string; age: number }): any {}

多参数合并 ​

当有多个参数时，@BodyParam 装饰器可以将多个同名参数对象合并为一个对象。如下所示：

ts
@HttpApi({
  baseURL: 'http://localhost:3000/users/',
})
class UserApi {
  @Post('/')
  createUser(
    @BodyParam('user') user: { name: string; age: number },
    @BodyParam('person') person: { sex: string },
  ): any {}
}
// body参数
const { data } = await userApi.createUser({ name: 'test', age: 18 }, { sex: '男' });
console.log(data);

最终body参数如下所示：

json
{ "person": { "sex": "男" }, "user": { "name": "test", "age": 18 } }

全省略参数

如果你两个参数都省略那么会合并为数组

ts
@Post('/')
createUser(
  @BodyParam() user: { name: string; age: number },
  @BodyParam() person: { sex: string },

最终结果为：

json
[{ "sex": "男" }, { "name": "test", "age": 18 }]

上传文件 ​

当然你可以使用@BodyParam实现更加复杂的功能，比如文件上传

ts
@HttpApi({
  baseURL: 'http://localhost:3000/users/',
})
class UserApi {
  @Post({
    url: '/upload',
    headers: {
      'Content-Type': 'mutilpart/form-data',
    },
  })
  uploadFile(@BodyParam('file') file: FormData): any {}
}

headers 参数

由于Body中的数据是多样的，为了提示后端以何种方式解析你的Body数据，你需要显示设置mime类型，即你需要在 headers 中指定Content-Type为mutilpart/form-data。常见的mime类型如下表所示：

MIME 类型用途示例场景
text/html网页渲染（...）HTML 网页
application/jsonJSON 数据API 响应（{"name":"John"}）
application/javascriptJavaScript 代码前端脚本（app.js）
image/jpegJPEG 图片照片（.jpg）
image/pngPNG 图片透明背景图片（.png）
application/pdfPDF 文档电子书/合同（.pdf）
application/x-www-form-urlencoded表单提交（键值对）name=John&age=30
multipart/form-data文件上传表单
application/octet-stream任意二进制文件下载文件（.exe，.zip）