Nest.js中使用HTTP五种数据传输方式小结
前言
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数据传输内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了npm 语义版本控制详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-09-09
这篇文章主要介绍了详解基于Koa2开发微信二维码扫码支付相关流程，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-05-05
npm install安装报错:gyp info it worked if it ends with
今天新启动一个项目,在 npm install 安装依赖项时出现报错,所以下面这篇文章主要给大家介绍了关于npm install安装报错:gyp info it worked if it ends with ok的解决方法,需要的朋友可以参考下2022-07-07
这篇文章主要介绍了node.js中Buffer缓冲器的原理与使用方法,结合实例形式分析了node.js Buffer缓冲器的基本概念、原理、创建、使用方法及相关操作注意事项,需要的朋友可以参考下2019-11-11
这篇文章主要介绍了Node.js API详解之 Error模块用法,结合实例形式分析了Node.js API中Error模块相关功能、函数、用法及操作注意事项,需要的朋友可以参考下2020-05-05
这篇文章主要为大家介绍了nvm mac 环境搭建过程示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-02-02
这篇文章主要介绍了在Node.js应用中读写Redis数据库的简单方法,Redis是一个内存式高速数据库,需要的朋友可以参考下2015-06-06
node NPM库string-random生成随机字符串学习使用
这篇文章主要为大家介绍了node NPM库string-random生成随机字符串学习使用，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-07-07
这篇文章主要介绍了node详细安装教程及Vue脚手架搭建的相关资料,包括国内镜像设置、项目创建及运行配置,覆盖从安装到启动的完整实践步骤,需要的朋友可以参考下2025-09-09
在前端开发中，随着TypeScript的不断普及，越来越多的开发者使用TypeScript进行开发，然而，在后端开发中，在Node.js中使用 TypeScript还是相对较少见的，这篇文章将介绍如何在Node.js中配置TypeScript ，以及如何使用TypeScript来开发高质量的应用程序2023-06-06
最新评论