我们知道目前前端和后端进行数据传输大致的方法有以下五种。

还有一些其他的例如xml那种方式这里就不进行说明了，目前基本不会使用，现在发现139邮箱是这种方式进行传递的。但是发现他的content-type也并没有设置application/xml。

以前也总结过express上述方式的解析方式：

下面我们来介绍一下在nestjs中如何解析这些方式传递的数据。

url param

这种方式对于我们前端来说，就是我们前端的动态路由。一般是get请求会通过这种方式进行传递，不过post请求也是可以的,只不过一般不这么用。(post请求参数系统放在请求体中)。在nest中我们使用@Param进行解析url param参数。并且可以指定获取那个具体的参数。

  @Get('geturlparams/:id')
  getUrlParam(@Param('id') id: string) { // 指定获取id
    return `获取get请求url param参数: ${id}`;
  }

我们可以在url中传递多个参数，通过/分割。对于获取多个数据，我们一般不在@Param中指定具体的参数名。

// @Get('geturlparams/:id/:name')
// getUrlParams(@Param('id') id: string, @Param('name') name: string) {
//   return `获取get请求url param参数: id: ${id}, name: ${name}`;
// }
@Get('geturlparams/:id/:name')
getUrlParams(@Param() obj: Record) {
    console.log('obj', obj);
    return `获取get请求url param参数: ${JSON.stringify(obj)}`;
}

url query

url query一般也是get请求进行传递参数的一种方式。我们在定义接口路由的时候不需要向url param那样事先定义参数名称，而是可以直接拿到传递的数据。

在nest中通过@Query进行获取参数，也是可以指定具体的参数名称进行获取。同url param一样post请求也是可以的，只是日常不这样用来获取参数而已。

// @Get('geturlquery')
// getUrlQuery(@Query() obj: Record) {
//   console.log('obj', obj);
//   return `获取get请求url query参数: ${JSON.stringify(obj)}`;
// }
@Get('geturlquery')
getUrlQuery(@Query('name') name: string) {
    // 只获取name参数
    return `获取get请求url query参数: ${name}`;
}

form-urlencoded

这种方式是通过表单post请求提交数据的一种方式。其实就是把上面的url query传递的参数样式放在请求体body中传递给后端。所以说post请求用这种方式进行传递数据。

在nest中通过@Body进行获取参数，也是可以指定具体的参数名称进行获取。在get请求中也是可以进行传递的。并且content-type设置为application/x-www-form-urlencoded

  @Post('postformurlencoded')
  postFormUrlEncoded(@Body() body: Record) {
    console.log('post-body', body);
    return `获取post请求form-urlencoded参数: ${JSON.stringify(body)}`;
  }
  
  // @Post('postformurlencoded')
  // postFormUrlEncoded(@Body('name') name: string) {
  //   return `获取post请求form-urlencoded参数: name: ${name}`;
  // }

form-data

这种方式也是通过表单post请求提交数据的一种方式。文件数据传递一般通过这种方式。他的格式是用 --------- + 一串数字做为 boundary 分隔符。

如果单纯的传递文本类型，一般不会使用这种方式，因为他是通过特殊格式进行分割数据，所以会增大请求体体积。

在nest中进行解析这种参数，我们可以通过@UploadedFiles配合下面这种方式进行获取，如果想要获取传递的文本，我们还是需要通过@Body。并且需要指定content-type为multipart/form-data

import { AnyFilesInterceptor } from '@nestjs/platform-express';
@Post('postformdata')
@UseInterceptors(
    AnyFilesInterceptor({
      dest: './uploads/',
    }),
)
postFormData(@Body() body: any, @UploadedFiles() files: any) {
    console.log('post-files', files);
    console.log('post-body', body);
    return `获取post请求form-data参数: ${JSON.stringify({
      body,
      files,
    })}`;
}

json

这种方式是现在post传递数据最常用的方式，在nest中我们也不需要特殊处理直接通过@Body进行获取即可。nestjs会自动根据content-type去进行正确处理。

  @Post('postjson')
  postJson(@Body() body: Record) {
    console.log('post-body', body);
    return `获取post请求json参数: ${JSON.stringify(body)}`;
  }
  
  // @Post('postjson')
  // postJson(@Body('name') name: string) {
  //   return `获取post请求form-urlencoded参数: name: ${name}`;
  // }

往期年度总结往期文章专栏文章