Axios意外将响应数据按字母排序问题求助

问题原因 #

这不是Axios的问题，而是JavaScript对象的特性：ES6+规范中，对于非数字类型的字符串键，对象属性会按字典序（字母顺序）排列。Axios默认会把后端返回的JSON字符串解析为JavaScript对象，这一步就会导致属性顺序被重新排列，哪怕后端返回的JSON字符串是保留原有顺序的。

解决方案 #

1. 后端调整返回格式（推荐）

让后端返回数组包裹的键值对结构，彻底保留顺序，比如：

[
  {"key": "profession", "value": "doctor"},
  {"key": "car", "value": "Honda"},
  {"key": "age", "value": 45}
]

前端拿到后直接遍历数组渲染，就能完全还原数据库中的原始顺序。

2. 前端手动处理响应（后端无法修改时）

禁用Axios的自动JSON解析，手动处理响应字符串来保留顺序：

const fetchForms = async (data) => {
  const res = await axios.post("/api/v1/forms/filtered", data, {
    responseType: 'text' // 关闭自动解析为JS对象
  });
  // 将JSON字符串解析为键值对数组，保留原始顺序
  const orderedData = Object.entries(JSON.parse(res.data));
  console.log(orderedData);
  // 后续渲染时遍历orderedData即可
};

注意：这种方法依赖后端返回的JSON字符串本身是有序的（大多数后端框架返回的JSON会保留键的定义顺序），但可靠性不如后端直接返回数组。

内容的提问来源于stack exchange，提问作者Evan Serg