Nest.js中使用HTTP五种数据传输方式小结
作者：1in
前言
Nest.js作为JS的后端框架，是JS开发者迈向全栈的不错选择，Nest.js也是企业中最流行的Node框架，它提供了IOC、AOP、微服务等架构特性。
接下来就让我们认识一下Nest.js在HTTP五种数据传输方式中的使用。
Param
param 传输方式是通过url的参数传递，也是最常见的一种前端向后端传递参数的方式。
如果Nest后端接口这样设置
@Controller('api/parma')
export class ParmaController {
@Get(':id')
urlParm(@Param('id') id: string) {
return `id=${id}`;
}
}前端请求这样请求
axios.get("http://localhost:3000/1in/parma/cdut")那么，其中的cdut会被当做parma参数被Nest截取，Nest也为我们提供了便捷的@Param装饰器，使我们可以更便捷的提取param参数。
Query
query传输方式也是通过url的参数传递，但是他与parma略有不同。query传输方式需要做url encode
如果Nest后端接口这样设置
@Controller('api/query')
export class QueryController {
@Get('find') query(@Query('name') name: string, @Query('age') age: number)
{ return `name=${name},age=${age}`; } }前端请求这样请求
axios.get("http://localhost:3000/1in/query/",{
name:"1in",
age:20
})因为axios会自动帮我们url encode，所以我们不需要自己手动url encode，在Nest中，我们通过@Query这个装饰器来取到query参数。
Form urlencoded
与query不同的是，from urlencoded是通过post请求中的body来传递参数，实际上，就是把query的参数放在body中。
需要注意的是我们需要在请求头中设置'content-type': 'application/x-www-form-urlencoded'。
如果Nest后端接口这样设置
@Controller('api/form-urlencoded')
export class FormUrlencodedController {
@Post() body(@Body() body)
{ return `${JSON.stringify(body)}` }
}前端请求前，我们需要使用qs这个库来做一下url encode
前端请求这样请求
axios.post('http://localhost:3000/api/form-urlencoded',
Qs.stringify({ name: '1in', age: 20 }),
{ headers: { 'content-type': 'application/x-www-form-urlencoded' } });在Nest中，我们可以通过@Body这个装饰器来直接取到body中的内容。
Json
与form urlencoded不同的是，json需要指定的content-type为application/json，也不需要url encode，同样的也是通过post请求中的Body传输数据。
如果Nest后端接口这样设置
@Controller('api/json')
export class JsonController {
@Post()
body(@Body() body) {
return `received: ${JSON.stringify(createPersonDto)}`
}
}前端这样请求
axios.post("http://localhost:3000/api/json",{
name:"1in",
age:20
})因为axios会帮我们设置content-type为application/json，所以不需要我们自动设置，Nest同样也是通过@Body装饰器取到body中传输的数据。
Form data
form data是通过---------作为boundary传输的内容，主要用于传输文件。
如果Nest后端接口这样设置
import { AnyFilesInterceptor } from '@nestjs/platform-express';
@Controller('api/form-data')
export class FormDataController {
@Post('file')
@UseInterceptors(AnyFilesInterceptor())
body2(@Body() body, @UploadedFiles() files: Array<Express.Multer.File>) {
console.log(files);
return `received: ${JSON.stringify(body)}`
}
}前端代码使用 axios 发送 post 请求，指定 content type 为 multipart/form-data
前端请求是这样的
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://unpkg.com/axios@0.24.0/dist/axios.min.js"></script>
</head>
<body>
<input id="updateFile" type="file" multiple/>
<script>
const fileInput = document.querySelector('#updateFile');
async function formData() {
const data = new FormData();
data.set('name','1in');
data.set('age', 20);
data.set('file1', fileInput.files[0]);
data.set('file2', fileInput.files[1]);
const res = await axios.post('http://localhost:3000/api/form-data/file', data, {
headers: { 'content-type': 'multipart/form-data' }
});
}
fileInput.onchange = formData;
</script>
</body>
</html>form data通过 ----- 作为 boundary 分隔的数据。主要用于传输文件，在Nest中使用 FilesInterceptor 来处理其中的 binary 字段，用 @UseInterceptors 装饰器来启用，其余字段用 @Body 装饰器来取。axios 发送请求时，需要设置请求头，指定 content type为 multipart/form-data，并且用 FormData 对象来封装传输的内容。
到此这篇关于Nest.js中使用HTTP五种数据传输方式小结的文章就介绍到这了,更多相关Nest.js HTTP数据传输内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！