当前位置：首页 > news >正文

Vue3中API设计与编码兼容性分析

news 2026/5/11 9:01:20

代码：

/** * 下载质量体系文件，实现 SQL Server image 类型文件下载，使用 get 请求 * @param fileNo 文件编号（可能包含非安全字符，如：4.2 2人员v∕V/v+DW=dw，其中空格、全角斜杠∕、半角斜杠/、加号+、非ASCII字符（如中文、日文等），这些字符为非安全字符，在URL中都会被编码传输） * @returns 文件流 {@link Blob} */ export const qualityFileDownloadFileService = (fileNo: string) => { // 1、预先不处理 fileNo // 2、发送请求时，将 4.2 人员∕/vVv+DW=dw 编码为 4.2+2%E4%BA%BA%E5%91%98v%E2%88%95V%2Fv%2BDW%3Ddw，其中空格编码为+ // 3、最终发送请求Request URL为：http://localhost:5173/api/resources/qualityFile/downloadFile?fileNo=4.2+2%E4%BA%BA%E5%91%98v%E2%88%95V%2Fv%2BDW%3Ddw // 4、后端通过@RequestParam接收数据时会自动将URL中的 4.2+2%E4%BA%BA%E5%91%98v%E2%88%95V%2Fv%2BDW%3Ddw 解码为 4.2 2人员v∕V/v+DW=dw // 5、后端不需要再额外处理 return request.get("/resources/qualityFile/downloadFile", { params: { fileNo: fileNo }, // 响应类型为 blob，用于接收二进制数据流 responseType: "blob" }); }; /** * 下载质量体系文件，实现 SQL Server image 类型文件下载，使用 get 请求，并且使用 encodeURIComponent 对文件编号进行编码处理 * @param fileNo 文件编号（可能包含非安全字符，如：4.2 2人员v∕V/v+DW=dw，其中空格、全角斜杠∕、半角斜杠/、加号+、非ASCII字符（如中文、日文等），这些字符为非安全字符，在URL中都会被编码传输） * @returns 文件流 {@link Blob} */ export const qualityFileDownloadFileWithGetByEncodeService = (fileNo: string) => { // 1、预先处理 fileNo，使用 encodeURIComponent 将 4.2 2人员v∕V/v+DW=dw，编码为 4.2%202%E4%BA%BA%E5%91%98v%E2%88%95V%2Fv%2BDW%3Ddw，其中空格编码为%20 // 2、发送请求时，将 4.2%202%E4%BA%BA%E5%91%98v%E2%88%95V%2Fv%2BDW%3Ddw 编码为 4.2%25202%25E4%25BA%25BA%25E5%2591%2598v%25E2%2588%2595V%252Fv%252BDW%253Ddw，主要是将%编码为%25 // 3、最终发送请求Request URL为：http://localhost:5173/api/resources/qualityFile/downloadFileWithGetByEncode?fileNo=4.2%25202%25E4%25BA%25BA%25E5%2591%2598v%25E2%2588%2595V%252Fv%252BDW%253Ddw // 4、后端先通过@RequestParam接收数据时会自动将URL中的 4.2%25202%25E4%25BA%25BA%25E5%2591%2598v%25E2%2588%2595V%252Fv%252BDW%253Ddw 解码为 4.2%202%E4%BA%BA%E5%91%98v%E2%88%95V%2Fv%2BDW%3Ddw // 5、后端再通过 UriUtils 进行解码处理，将 4.2%202%E4%BA%BA%E5%91%98v%E2%88%95V%2Fv%2BDW%3Ddw 解码为 4.2 2人员v∕V/v+DW=dw const encodedFileNo = encodeURIComponent(fileNo); return request.get("/resources/qualityFile/downloadFileWithGetByEncode", { params: { fileNo: encodedFileNo }, // 响应类型为 blob，用于接收二进制数据流 responseType: "blob" }); };

这两种API的设计是为了解决不同场景下的URL编码问题，特别是在处理特殊字符时的兼容性需求。以下是主要原因：

1.编码处理方式不同

第一种API (`qualityFileDownloadFileService`)

不进行预编码：依赖axios/请求库的自动编码
空格处理：自动编码为+
后端处理：Spring Boot会自动解码，无需额外处理

第二种API (`qualityFileDownloadFileWithGetByEncodeService`)

主动编码：使用encodeURIComponent()预编码
空格处理：编码为%20
后端处理：需要手动二次解码

2.兼容性考虑

场景1：标准REST API（第一种）

javascript

// 适用场景：现代框架、Spring Boot标准配置 // 优点：简洁，符合REST规范 // 缺点：某些旧系统可能无法正确处理+号

场景2：旧系统或特殊编码需求（第二种）

javascript

// 适用场景： // 1. 旧版后端系统 // 2. 需要与前端JavaScript标准编码保持一致 // 3. 与其他系统（非Java）集成时

3.特殊字符处理差异

示例：4.2 2人员v∕V/v+DW=dw

第一种API的编码结果：

空格 →+
/→%2F
中文 →%E4%BA%BA%E5%91%98
发送：4.2+2%E4%BA%BA%E5%91%98v%E2%88%95V%2Fv%2BDW%3Ddw

第二种API的编码结果：

空格 →%20
/→%2F
双重编码：%→%25
发送：4.2%25202%25E4%25BA%25BA%25E5%2591%2598v%25E2%2588%2595V%252Fv%252BDW%253Ddw

4.实际应用建议

第二种API的适用场景

javascript

// 仅在以下情况使用： // 1. 后端明确要求手动编码 // 2. 与其他系统集成时编码规则不一致 // 3. 处理特定字符集问题 // 示例：需要与Node.js或其他后端系统保持编码一致时 const downloadWithEncode = async (fileNo: string) => { // 确保编码方式与其他系统匹配 return qualityFileDownloadFileWithGetByEncodeService(fileNo); };

5.最佳实践总结

typescript

// 统一建议： // 1. 新项目使用第一种API // 2. 保持前后端编码规则一致 // 3. 在API文档中明确说明编码要求 // 4. 考虑使用POST方式传输复杂参数 // 如果遇到编码问题，可以考虑： export const qualityFileDownloadFileService = (fileNo: string) => { // 统一使用URLSearchParams处理特殊字符 const params = new URLSearchParams(); params.append('fileNo', fileNo); return request.get("/resources/qualityFile/downloadFile", { params, responseType: "blob" }); };

结论：第一种API是推荐的标准做法，第二种API主要用于特定兼容性场景。在设计API时，应该优先考虑标准的、简化的工作流程，减少不必要的编码解码环节。

查看全文

http://www.jsqmd.com/news/75183/