5 种 HTTP 数据传输方式

HTTP 数据传输的方式主要有五种：

url param
query
form-urlencoded
form-data
json

url param

param 是 url 中的参数，Nest 里通过 :<参数名> 来声明，然后通过 @Param（参数名） 取出来注入 Controller。

@Controller('person')
export class PersonController {
  constructor(private readonly personService: PersonService) {}

  @Get(':id')
  urlParma(@Param('id') id: string) {
    return `received ${id}`
  }
}

Controller('/person') 的路径会和 Get 的路径拼在一起，即路径为 /person/:id。对这个接口发起请求：

query

query 是 url 中 ? 后的字符串，需要做 url encode。query 的参数通过 @Query 取出。

@Controller('person')
export class PersonController {
  constructor(private readonly personService: PersonService) {}

  @Get('find')
  query(@Query('name') name: string, @Query('age') age: number) {
    return `received: name=${name}, age=${age}`
  }
}

将 url 进行拼接后，对接口发起请求：

form urlencoded

上面两种是通过 url 传递数据的方式，接下来的三种是通过 body 传递数据。

form urlencoded 把 query 字符串放在 body 里，所以需要做 url encoded。通过 @Body 读取 body 中的内容，定义 dto 作为数据结构。dto 是 data transfer object，用于封装传输的数据对象：

export class CreatePersonDto {
  name: string
  age: number
}

@Controller('person')
export class PersonController {
  constructor(private readonly personService: PersonService) {}

  @Post()
  form(@Body() createPersonDto: CreatePersonDto) {
    return `${JSON.stringify(createPersonDto)}`
  }
}

使用 POST 请求该接口，指定 content type 为 application/x-www-form-urlencoded。

json

相比于 form urlencoded，通过 json 传输数据更为常用。Nest 仍然通过 @Body 来接收 json，不需要做变动。form urlencoded 和 json 都是通过 body 取值，Nest 会根据 content type 做区分，使用不同的解析方式。

@Controller('person')
export class PersonController {
  constructor(private readonly personService: PersonService) {}

  @Post()
  form(@Body() createPersonDto: CreatePersonDto) {
    return `${JSON.stringify(createPersonDto)}`
  }
}

使用 POST 请求该接口，指定 content type 为 application/json。

form data

form data 用于传输文件。Nest 解析 form data 使用 FileInterceptor 拦截器，用 UseInterceptors 装饰器启用，通过 UploadedFiles 取文件内容。非文件的内容同样是通过 Body 获取。

@Controller('person')
export class PersonController {
  constructor(private readonly personService: PersonService) {}

  @Post('file')
  @UseInterceptors(
    AnyFilesInterceptor({
      dest: 'uploads/',
    }),
  )
  form(
    @Body() createPersonDto: CreatePersonDto,
    @UploadedFiles() files: Array<Express.Multer.File>,
  ) {
    console.log(files)
    return `${JSON.stringify(createPersonDto)}`
  }
}

使用 POST 请求该接口，指定 content type 为 multipart/form-data 并且选择一个文件上传。

同时，服务端成功接收了文件，在指定目录下存放。

5 种 HTTP 数据传输方式 ​

url param ​

query ​

form urlencoded ​

json ​

form data ​