request请求相关

import qs from "qs"; 的作用是引入 qs 库，用于处理 URL 查询字符串的解析和序列化。它在 HTTP 请求中非常有用，尤其是在需要将复杂数据转换为 URL 编码格式时。

1. application/json;charset=utf-8

特点

请求体是一个 JSON 格式的字符串。

数据以键值对的形式组织，支持嵌套结构和复杂数据类型（如数组、对象）。

通常与 JSON.stringify(data) 配合使用，将 JavaScript 对象转换为 JSON 字符串。

使用场景

适用于需要传递复杂数据的接口，比如：

提交表单数据时，字段较多或包含嵌套结构。

后端接口明确要求 JSON 格式的请求体。

示例代码

Javascript

复制代码

1. headers: { 'Content-Type': 'application/json;charset=utf-8' },
2. data: JSON.stringify(data), // 将对象转换为 JSON 字符串

2. application/x-www-form-urlencoded

特点

请求体是一个 URL 编码的字符串，格式为 key1=value1&key2=value2 。

数据以键值对的形式组织，但不支持嵌套结构。

通常与 qs.stringify(data) 配合使用，将对象转换为 URL 编码的字符串。

使用场景

适用于传统的表单提交，比如：

提交简单的键值对数据。

后端接口要求表单格式的数据。

示例代码

Javascript

复制代码

headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
data: qs.stringify(data), // 将对象转换为 URL 编码的字符串

总结

application/json ：用于复杂数据，支持嵌套结构，通常与 JSON.stringify 配合使用。

application/x-www-form-urlencoded ：用于简单键值对数据，通常与 qs.stringify 配合使用。

具体使用哪种格式取决于后端接口的设计要求

3.'Content-Type':'multipart/form-data'

核心特点

Content-Type: multipart/form-data ：

这是专门用于文件上传的 HTTP 请求头格式。

支持将文件数据和其他表单字段（如文本参数）一起传输。

data 参数：

通常是一个 FormData 对象，用于封装文件和其他字段。

例如：

Javascript

const formData = new FormData();
formData.append('file', file); // 文件对象
formData.append('description', '图片介绍'); // 附加文本字段
典型应用场景

(1) 图片上传

示例：用户上传风险事件的现场图片。

流程：

前端通过 <input type="file"> 获取文件。

将文件包装为 FormData 。

调用 xxapi(formData) 上传到后端。

(2) 多文件或混合数据上传

示例：上传图片的同时附带文本描述或元数据。

代码：

Javascript

const formData = new FormData();
formData.append('images', file1); // 文件1
formData.append('images', file2); // 文件2
formData.append('comment', 'xx'); // 文本字段
riskUploadImage(formData);

(3) 兼容性场景

老式表单提交：如果后端接口要求兼容传统表单文件上传（如某些遗留系统）， multipart/form-data 是标准方式。

为什么用 multipart/form-data ？

文件支持：普通 JSON 或 URL 编码格式无法直接传输二进制文件。

分块传输：大文件会被分块传输，避免内存溢出。

字段混合：可以同时传递文件和非文件字段（如 userId 、 timestamp ）。

注意事项

FormData 对象：

必须使用 new FormData() 构造，不能直接传递普通对象。

文件需通过 append 方法添加。

后端处理：

后端需支持解析 multipart/form-data （如使用 multer （Node.js）或 MultipartFile （Spring Boot））。

边界问题：

multipart/form-data 会自动生成边界分隔符（如 ------WebKitFormBoundaryxxx ），无需手动设置

总结

何时用：需要上传文件（如图片、文档）或混合文件与非文件数据时。

关键点：

使用 FormData 封装文件。

设置 Content-Type: multipart/form-data 。

后端需支持对应解析逻辑。

qs.stringify(data)和JSON.stringify(data) 一样不？

qs.stringify(data) 和 JSON.stringify(data) 是两种完全不同的序列化方法，它们的作用和输出结果有显著区别。以下是它们的对比：

JSON.stringify(data)

作用

将 JavaScript 对象转换为 JSON 格式的字符串。

JSON 是一种轻量级的数据交换格式，支持复杂数据结构（如嵌套对象、数组等）。

输出示例

Javascript

const data = { name: "John", age: 30, hobbies: ["reading", "coding"] };
const jsonStr = JSON.stringify(data);

3.// 输出: '{"name":"John","age":30,"hobbies":["reading","coding"]}'

特点

保留数据的完整结构（包括嵌套字段和数组）。

适用于需要传递复杂数据的场景（如 REST API 的 application/json 请求）。

不支持 URL 编码，直接输出标准的 JSON 字符串。

使用场景

当后端接口要求 Content-Type: application/json 时使用。

例如：

Javascript

headers: { 'Content-Type': 'application/json' },
data: JSON.stringify(data),
qs.stringify(data)

作用

将 JavaScript 对象转换为 URL 编码的查询字符串。

主要用于表单提交或 URL 查询参数。

输出示例

Javascript

const data = { name: "John", age: 30, hobbies: ["reading", "coding"] };
const queryStr = qs.stringify(data);
// 默认输出: 'name=John&age=30&hobbies[0]=reading&hobbies[1]=coding'
// 如果配置 { arrayFormat: 'comma' }: 'name=John&age=30&hobbies=reading,coding'

特点

将数据转换为 key=value 的形式，用 & 连接。

支持配置数组的序列化方式（如逗号分隔、索引等）。

适用于 Content-Type: application/x-www-form-urlencoded 的请求。

使用场景

当后端接口要求 Content-Type: application/x-www-form-urlencoded 时使用。

例如：

Javascript

headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
data: qs.stringify(data, { arrayFormat: 'comma' }),