五种HTTP数据传输方式

2024-06-20 07:44

本文主要是介绍五种HTTP数据传输方式,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

在前端开发过程中,后端主要提供 http 接口来传输数据,而这种数据传输方式主要有五种:

  • url param
  • query
  • form-urlencoded
  • form-data
  • json

下面就让我们一起来了解一下在Nest.js中如何使用这五种HTTP数据传输方式:

一,创建项目

使用nest new 创建一个nest的项目

nest new 项目名称

在根目录执行 nest g resource person 快速生成 person 模块的 crud 代码

nest g resource person

nest start --watch 启动 Nest 服务

这样一个有 person 的 crud 接口的服务就跑起来了

二,访问静态资源

api 接口跑通了,再支持下静态资源的访问

main.ts 是负责启动 Nest 的 ioc 容器的,调用下 useStaticAssets 来支持静态资源的请求:

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
import { NestExpressApplication } from '@nestjs/platform-express';
async function bootstrap() {const app = await NestFactory.create<NestExpressApplication>(AppModule);app.useStaticAssets('public', { prefix: '/static'});await app.listen(3000);
}
bootstrap();
//注意:要给 create 方法传入 NestExpressApplication 的泛型参数才有 useStaticAssets这些方法

 我们指定 prefix 为 static,然后在静态文件目录 public 下添加一个 html

api 接口和静态资源的访问都支持了,接下来就分别实现下 5 种前后端 http 数据传输的方式

三,url param

url param 是 url 中的参数,Nest 里通过 :参数名 的方式来声明(比如下面的 :id),然后通过 @Param(参数名) 的装饰器取出来注入到 controller:

@Controller('person') 的路由和 @Get(':id') 的路由会拼到一起,也就是只有 /person/xxx 的 get 请求才会走到这个方法。

接下来我们在前端页面中使用axios请求一下这个接口:

在页面中使用axios发起一个get请求,参数放在url中

<!DOCTYPE html>
<html lang="en"><head><script src="https://unpkg.com/axios@0.24.0/dist/axios.min.js"></script>
</head><body><script>async function urlParam() {// 使用axios发起请求const res = await axios.get('/person/10086');console.log(res);}urlParam();</script>
</body>

 启动服务,在浏览器访问下:

控制台打印了服务端返回的消息,证明服务端拿到了通过 url param 传递的数据。

四,query

query 是 url 中 ? 后的字符串,需要做 url encode。

在 Nest 里,通过 @Query 装饰器来取:

注意:这个 find 的路由要放到 :id 的路由前面,因为 Nest 是从上往下匹配的,如果放在后面,那就匹配到 :id 的路由了。

接下来就在前端页面中去请求这个接口:

<!DOCTYPE html>
<html lang="en"><head><script src="https://unpkg.com/axios@0.24.0/dist/axios.min.js"></script>
</head><body><script>async function urlParam() {// 使用axios发起请求const res = await axios.get('/person/find',{params:{name:'张三',age:25}});console.log(res);}urlParam();</script>
</body>

 参数通过 params 指定,axios 会做 url encode,不需要自己做。

让我们测试一下,服务端成功接受了我们通过 query 传递的数据。

 上面两种(url param、query)是通过 url 传递数据的方式,下面 3 种是通过 body 传递数据

五,form urlencoded

form urlencoded 是通过 body 传输数据,其实是把 query 字符串放在了 body 里。

用 Nest 接收的话,使用 @Body 装饰器,Nest 会解析请求体,然后注入到 dto 中。

dto 是 data transfer object,就是用于封装传输的数据的对象:

前端代码使用 post 方式请求,指定 content type 为 application/x-www-form-urlencoded,用 qs 做下 url encode

<!DOCTYPE html>
<html lang="en"><head><script src="https://unpkg.com/axios@0.24.0/dist/axios.min.js"></script><script src="https://unpkg.com/qs@6.10.2/dist/qs.js"></script>
</head><body><script>async function formUrlEncoded() {const res = await axios.post('/person', Qs.stringify({name: '张三',age: 24}), {headers: { 'content-type': 'application/x-www-form-urlencoded' }});console.log(res);}formUrlEncoded();</script>
</body>

测试一下,服务器成功接收到了数据并返回:

六,json

json 需要指定 content-type 为 application/json,内容会以 JSON 的方式传输,后端代码同样使用 @Body 来接收,不需要做啥变动。form urlencoded 和 json 都是从 body 取值,Nest 内部会根据 content type 做区分,使用不同的解析方式。

前端代码使用 axios 发送 post 请求,默认传输 json 就会指定 content type 为 application/json,不需要手动指定

<!DOCTYPE html>
<html lang="en"><head><script src="https://unpkg.com/axios@0.24.0/dist/axios.min.js"></script>
</head><body><script>async function json() {const res = await axios.post('/person', {name: '张三',age: 24});console.log(res);}json();</script>
</body>

 测试下,服务端成功接收到了通过 json 传递的数据

 七,form data

json 和 form urlencoded 都不适合传递文件,想传输文件要用 form data

Nest 解析 form data 使用 FilesInterceptor 的拦截器,用 @UseInterceptors 装饰器启用,然后通过 @UploadedFiles 来取。非文件的内容,同样是通过 @Body 来取。

import { AnyFilesInterceptor } from '@nestjs/platform-express';
import { CreatePersonDto } from './dto/create-person.dto';@Controller('api/person')
export class PersonController {@Post('file')@UseInterceptors(AnyFilesInterceptor({dest: 'uploads/'}))body2(@Body() createPersonDto: CreatePersonDto, @UploadedFiles() files: Array<Express.Multer.File>) {console.log(files);return `received: ${JSON.stringify(createPersonDto)}`}
}

这一步需要

npm i -D @types/multer

 前端代码使用 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="fileInput" type="file" multiple/><script>const fileInput = document.querySelector('#fileInput');async function formData() {const data = new FormData();data.set('name','张三');data.set('age', 24);data.set('file1', fileInput.files[0]);data.set('file2', fileInput.files[1]);const res = await axios.post('/person/file', data, {headers: { 'content-type': 'multipart/form-data' }});console.log(res);     }fileInput.onchange = formData;</script>
</body>
</html>

 file input 指定 multiple 可以选择多个文件。

测试一下:

服务端接收到了 name 和 age:

去服务器控制台看下:

可以看到,服务器成功的接收到了我们上传的文件

八,总结

我们用 axios 发送请求,使用 Nest 后端服务,实现了 5 种 http/https 的数据传输方式:

其中前两种是 url 中的:

  • url param: url 中的参数,Nest 中使用 @Param 来取
  • query:url 中 ? 后的字符串,Nest 中使用 @Query 来取

后三种是 body 中的:

  • form urlencoded: 类似 query 字符串,只不过是放在 body 中。Nest 中使用 @Body 来取,axios 中需要指定 content type 为 application/x-www-form-urlencoded,并且对数据用 qs 或者 query-string 库做 url encode
  • json: json 格式的数据。Nest 中使用 @Body 来取,axios 中不需要单独指定 content type,axios 内部会处理。
  • form data:主要用于传输文件,Nest 中要使用 FilesInterceptor 来处理其中的 binary 字段,用 @UseInterceptors 来启用,其余字段用 @Body 来取。axios 中需要指定 content type 为 multipart/form-data,并且用 FormData 对象来封装传输的内容。

这 5 种 http 的传输数据的方式覆盖了绝大多数开发场景

下一章我们一起深入学习一下Nest的文件上传,大文件切片上传。

这篇关于五种HTTP数据传输方式的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1077522

相关文章

大模型研发全揭秘:客服工单数据标注的完整攻略

在人工智能(AI)领域,数据标注是模型训练过程中至关重要的一步。无论你是新手还是有经验的从业者,掌握数据标注的技术细节和常见问题的解决方案都能为你的AI项目增添不少价值。在电信运营商的客服系统中,工单数据是客户问题和解决方案的重要记录。通过对这些工单数据进行有效标注,不仅能够帮助提升客服自动化系统的智能化水平,还能优化客户服务流程,提高客户满意度。本文将详细介绍如何在电信运营商客服工单的背景下进行

基于MySQL Binlog的Elasticsearch数据同步实践

一、为什么要做 随着马蜂窝的逐渐发展,我们的业务数据越来越多,单纯使用 MySQL 已经不能满足我们的数据查询需求,例如对于商品、订单等数据的多维度检索。 使用 Elasticsearch 存储业务数据可以很好的解决我们业务中的搜索需求。而数据进行异构存储后,随之而来的就是数据同步的问题。 二、现有方法及问题 对于数据同步,我们目前的解决方案是建立数据中间表。把需要检索的业务数据,统一放到一张M

关于数据埋点,你需要了解这些基本知识

产品汪每天都在和数据打交道,你知道数据来自哪里吗? 移动app端内的用户行为数据大多来自埋点,了解一些埋点知识,能和数据分析师、技术侃大山,参与到前期的数据采集,更重要是让最终的埋点数据能为我所用,否则可怜巴巴等上几个月是常有的事。   埋点类型 根据埋点方式,可以区分为: 手动埋点半自动埋点全自动埋点 秉承“任何事物都有两面性”的道理:自动程度高的,能解决通用统计,便于统一化管理,但个性化定

使用SecondaryNameNode恢复NameNode的数据

1)需求: NameNode进程挂了并且存储的数据也丢失了,如何恢复NameNode 此种方式恢复的数据可能存在小部分数据的丢失。 2)故障模拟 (1)kill -9 NameNode进程 [lytfly@hadoop102 current]$ kill -9 19886 (2)删除NameNode存储的数据(/opt/module/hadoop-3.1.4/data/tmp/dfs/na

异构存储(冷热数据分离)

异构存储主要解决不同的数据,存储在不同类型的硬盘中,达到最佳性能的问题。 异构存储Shell操作 (1)查看当前有哪些存储策略可以用 [lytfly@hadoop102 hadoop-3.1.4]$ hdfs storagepolicies -listPolicies (2)为指定路径(数据存储目录)设置指定的存储策略 hdfs storagepolicies -setStoragePo

Hadoop集群数据均衡之磁盘间数据均衡

生产环境,由于硬盘空间不足,往往需要增加一块硬盘。刚加载的硬盘没有数据时,可以执行磁盘数据均衡命令。(Hadoop3.x新特性) plan后面带的节点的名字必须是已经存在的,并且是需要均衡的节点。 如果节点不存在,会报如下错误: 如果节点只有一个硬盘的话,不会创建均衡计划: (1)生成均衡计划 hdfs diskbalancer -plan hadoop102 (2)执行均衡计划 hd

【Prometheus】PromQL向量匹配实现不同标签的向量数据进行运算

✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯,先赞后看哦~🎈🎈 🏆 作者简介:景天科技苑 🏆《头衔》:大厂架构师,华为云开发者社区专家博主,阿里云开发者社区专家博主,CSDN全栈领域优质创作者,掘金优秀博主,51CTO博客专家等。 🏆《博客》:Python全栈,前后端开发,小程序开发,人工智能,js逆向,App逆向,网络系统安全,数据分析,Django,fastapi

透彻!驯服大型语言模型(LLMs)的五种方法,及具体方法选择思路

引言 随着时间的发展,大型语言模型不再停留在演示阶段而是逐步面向生产系统的应用,随着人们期望的不断增加,目标也发生了巨大的变化。在短短的几个月的时间里,人们对大模型的认识已经从对其zero-shot能力感到惊讶,转变为考虑改进模型质量、提高模型可用性。 「大语言模型(LLMs)其实就是利用高容量的模型架构(例如Transformer)对海量的、多种多样的数据分布进行建模得到,它包含了大量的先验

烟火目标检测数据集 7800张 烟火检测 带标注 voc yolo

一个包含7800张带标注图像的数据集,专门用于烟火目标检测,是一个非常有价值的资源,尤其对于那些致力于公共安全、事件管理和烟花表演监控等领域的人士而言。下面是对此数据集的一个详细介绍: 数据集名称:烟火目标检测数据集 数据集规模: 图片数量:7800张类别:主要包含烟火类目标,可能还包括其他相关类别,如烟火发射装置、背景等。格式:图像文件通常为JPEG或PNG格式;标注文件可能为X

pandas数据过滤

Pandas 数据过滤方法 Pandas 提供了多种方法来过滤数据,可以根据不同的条件进行筛选。以下是一些常见的 Pandas 数据过滤方法,结合实例进行讲解,希望能帮你快速理解。 1. 基于条件筛选行 可以使用布尔索引来根据条件过滤行。 import pandas as pd# 创建示例数据data = {'Name': ['Alice', 'Bob', 'Charlie', 'Dav