UmiJS中POST请求数组数据异常问题解析

问题现象

在使用UmiJS框架的request方法发起POST请求时，当请求体数据为数组类型时，控制台会抛出Cannot convert object to primitive value错误。这个错误发生在axios内部处理请求数据的环节，具体是在判断请求体是否为FormData类型时出现的类型转换异常。

技术背景

UmiJS内置的请求库基于axios封装，在发送请求时会自动对数据进行序列化处理。当请求体是一个对象数组时，axios内部会调用toString()方法进行类型判断，而数组直接调用toString()会导致将数组元素转换为字符串时出现异常。

错误原因分析

错误的核心在于axios的isFormData方法实现：

function isFormData(thing) {
  var pattern = '[object FormData]';
  return thing && (
    (typeof FormData === 'function' && thing instanceof FormData) ||
    toString.call(thing) === pattern ||
    (isFunction(thing.toString) && thing.toString() === pattern)
  );
}

当传入数组数据时，该方法尝试调用数组的toString()方法进行判断，而数组中的对象元素无法直接转换为原始值，导致类型错误。

解决方案

方案一：手动序列化数据

在发送请求前，手动将数组数据序列化为JSON字符串：

export async function saveUpdateConfig(body: Config[], options?: { [key: string]: any }) {
  return request<any>(`/xx-service/api/v1/config`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    data: JSON.stringify(body), // 手动序列化
    ...(options || {}),
  });
}

方案二：使用请求拦截器

添加全局请求拦截器，自动处理数组类型的请求体：

const requestInterceptor = async (config: RequestOptions) => {
  if (config.data && Array.isArray(config.data)) {
    config.data = JSON.stringify(config.data);
  }
  return config;
}

方案三：升级axios版本

虽然UmiJS当前依赖的是axios 0.27.2版本，但最新版axios已经到1.7.2。可以考虑：

1. 检查UmiJS是否支持升级axios版本
2. 在项目中手动覆盖axios版本
3. 关注UmiJS后续版本更新

最佳实践建议

1. 对于复杂数据结构，特别是数组类型，建议预先序列化为JSON字符串
2. 明确设置Content-Type为application/json
3. 考虑使用TypeScript类型约束确保数据格式正确
4. 对于关键API请求，添加适当的错误处理和日志记录

总结

这个问题展示了在Web开发中处理复杂数据结构时需要注意的细节。理解底层库的工作原理有助于快速定位和解决问题。在实际开发中，建议团队建立统一的数据处理规范，避免类似问题的发生。