Alova.js 中处理 FormData 上传请求的共享问题解析

问题背景

在使用 Alova.js 3.1.0 版本进行多文件上传时，开发者遇到了一个典型问题：当使用相同的请求方法但携带不同的 FormData 数据时，系统只发送了一次请求，而不是预期的多次请求。即使尝试通过设置 cacheFor: null 或 send(true) 也无法解决这个问题。

问题本质分析

这个问题实际上涉及到了 Alova.js 的两个核心机制：

1. 共享请求机制：Alova.js 默认会为具有相同 methodKey 的请求启用共享机制，这意味着当多个相同请求同时发出时，系统只会实际发送一个请求。

2. FormData 处理机制：由于 FormData 可能包含二进制数据，Alova.js 在生成 methodKey 时不会对 FormData 内容进行序列化处理，而是将其视为空对象 {}，这导致不同的 FormData 会被识别为相同的请求。

解决方案详解

方案一：全局关闭共享请求

可以通过配置全局选项来完全禁用共享请求机制。这种方法简单直接，但会影响所有请求，可能导致不必要的网络请求增加。

方案二：添加唯一标识参数

更推荐的做法是在请求时添加一个唯一标识参数（如时间戳或 UUID）。这种方法灵活可控，可以针对特定请求进行处理，不影响其他请求的共享行为。

方案三：自定义 methodKey

Alova.js 支持自定义 methodKey 生成逻辑。开发者可以覆盖默认的 methodKey 生成函数，加入对 FormData 的特殊处理，确保不同的 FormData 能生成不同的 methodKey。

技术细节深入

请求处理流程解析

1. 缓存检查阶段：系统首先检查缓存是否被禁用或是否强制请求

   • 如果缓存有效且未被禁用，尝试获取缓存数据
   • 如果无缓存或缓存被禁用，进入下一阶段

2. 共享请求检查阶段：

   • 检查是否存在相同 methodKey 的共享请求
   • 存在则复用共享请求
   • 不存在则发起新请求

FormData 的特殊性

FormData 对象通常用于文件上传，具有以下特点：

• 可能包含二进制数据，难以序列化
• 自动生成的 boundary 标识符对请求唯一性很重要
• 需要特别注意 Content-Type 头的处理

最佳实践建议

1. 对于文件上传等特殊请求，建议显式添加唯一标识参数
2. 在全局配置中保持共享请求开启，仅在需要时局部禁用
3. 处理 FormData 时，注意不要手动设置 Content-Type 头，让浏览器自动处理
4. 考虑在 beforeRequest 钩子中清理不必要的头信息

总结

Alova.js 的共享请求机制虽然提高了性能，但在处理 FormData 上传时需要特别注意。理解其内部工作原理后，开发者可以通过多种方式灵活控制请求行为，确保应用既能享受性能优化，又能正确处理特殊场景。