Angular HttpClient返回JSON字段自动按字母排序问题求助

当使用Angular的HttpClient调用API时，会遇到返回的JSON对象字段被自动按字母排序的情况，和Postman中看到的原始响应顺序不一致——比如后端返回的total对象键顺序是error、run、desc，但HttpClient解析后变成了desc、error、run。

问题原因 #

这不是Angular HttpClient的问题，而是浏览器原生JSON.parse的行为：JavaScript对象的属性顺序在早期规范中没有明确规定，现代浏览器虽然对字符串属性的顺序有了规则，但JSON.parse在解析时会自动对对象键进行字母排序（不同环境可能有差异），导致最终拿到的对象属性顺序和原始JSON字符串不一致。

解决办法 #

1. 获取原始文本后手动解析为有序结构

通过指定responseType: 'text'拿到原始JSON字符串，再用JSON.parse的reviver函数将对象转换为Map（Map会严格保留键的插入顺序）：

constructor(private http: HttpClient) {}
ngOnInit(): void {
  this.http.get("http://localhost:8080/api/test/test?status=None", { responseType: 'text' })
    .subscribe((rawText) => {
      const parsedData = JSON.parse(rawText, (key, value) => {
        if (typeof value === 'object' && value !== null && !Array.isArray(value)) {
          return new Map(Object.entries(value));
        }
        return value;
      });
      console.log(parsedData);
      // 遍历Map时会保留原始顺序
      parsedData.total.forEach((value, key) => {
        console.log(`${key}: ${value}`);
      });
    });
}

如果需要更贴近对象的使用方式，也可以将对象转换为键值对数组，同样能保留顺序：

const rawObj = JSON.parse(rawText);
const orderedTotal = Object.entries(rawObj.total);
console.log(orderedTotal); // [["error", 321], ["run", 338], ["desc", 1000]]

2. 后端调整响应格式（如果可控）

让后端将需要保留顺序的对象改为键值对数组的形式，比如：

"total": [
  {"key": "error", "value": 321},
  {"key": "run", "value": 338},
  {"key": "desc", "value": 1000}
]

前端拿到数组后，顺序完全由后端控制，不会被自动排序。

补充说明 #

如果只是控制台显示的问题：Chrome等浏览器的控制台在展示JavaScript对象时，会自动按字母排序显示属性，但实际遍历对象时（比如用for...in或Object.keys），ES6+环境下对于非数字的字符串键，会按照它们在对象中被插入的顺序返回——不过这个顺序是否和原始JSON一致，还是取决于JSON.parse的实现，所以最可靠的方式还是用Map或数组来保存顺序。

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