脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → node.js → Nest.js HTTP数据传输

Nest.js中使用HTTP五种数据传输方式小结

 更新时间：2023年05月28日 15:40:39   作者：1in  
本文主要介绍了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数据传输内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • Nodejs技巧之Exceljs表格操作用法示例

    Nodejs技巧之Exceljs表格操作用法示例

    这篇文章主要介绍了Nodejs技巧之Exceljs表格操作用法,结合实例形式分析了node.js使用Exceljs操作Excel表格的载人、获取、遍历、输出等相关实现技巧,需要的朋友可以参考下
    2019-11-11
  • 详解Nodejs内存治理

    详解Nodejs内存治理

    本篇文章给大家分享了Nodejs内存处理相关的知识点以及实例代码分享，有兴趣的朋友跟着学习下。
    2018-05-05
  • nodejs实现百度舆情接口应用示例

    nodejs实现百度舆情接口应用示例

    这篇文章主要介绍了nodejs实现百度舆情接口应用,结合实例形式分析了node.js调用百度舆情接口的具体使用技巧,需要的朋友可以参考下
    2020-02-02
  • 浅谈Node Inspector 代理实现

    浅谈Node Inspector 代理实现

    这篇文章主要介绍了浅谈Node Inspector 代理实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • Node.js 异步异常的处理与domain模块解析

    Node.js 异步异常的处理与domain模块解析

    本篇文章主要介绍了Node.js 异步异常的处理与domain模块解析，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-05-05
  • node.js连接mysql与基本用法示例

    node.js连接mysql与基本用法示例

    这篇文章主要介绍了node.js连接mysql与基本用法,结合实例形式分析了nodejs中mysql模块的安装、引入、创建连接、sql语句执行等相关操作技巧,需要的朋友可以参考下
    2019-01-01
  • 使用nodeAPI时遇到过异步问题解决

    使用nodeAPI时遇到过异步问题解决

    这篇文章主要为大家介绍了使用nodeAPI时遇到过异步问题解决，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-01-01
  • node.js中的fs.fstatSync方法使用说明

    node.js中的fs.fstatSync方法使用说明

    这篇文章主要介绍了node.js中的fs.fstatSync方法使用说明,本文介绍了fs.fstatSync的方法说明、语法、接收参数、使用实例和实现源码,需要的朋友可以参考下
    2014-12-12
  • 前端必会的nodejs知识工具模块使用示例详解

    前端必会的nodejs知识工具模块使用示例详解

    这篇文章主要为大家介绍了前端必会的nodejs知识工具模块使用示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-10-10
  • Nodejs Socket连接池及TCP HTTP网络模型详解

    Nodejs Socket连接池及TCP HTTP网络模型详解

    这篇文章主要为大家介绍了Nodejs Socket连接池及TCP HTTP网络模型,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-08-08

最新评论