Angular 5中遍历subscribe方法的方式及数组顺序不一致原因排查

嘿，我来帮你捋捋这个问题！在Angular里碰到这种数组推入顺序不一致的情况，通常是这几个原因导致的：

• 异步请求并行执行，响应顺序不可控：如果你的subscribe逻辑里发起了多个异步请求（比如循环调用HTTP接口），这些请求是同时跑的，谁先拿到响应谁就先被推入数组。比如A请求耗时200ms，B请求耗时100ms，那B的结果会先进数组，哪怕你是先发起A的。

• 遍历的数据源本身无序：要是你遍历的是普通JavaScript对象（比如Object.keys()拿到的键），那遍历顺序本身就不稳定。ES6之后对象的键虽然有了插入顺序的规则，但如果键是数字类型，会被自动排序，字符串键才按插入顺序来，混用的话很容易乱序。

• RxJS操作符用错了：如果Observable链里用了mergeMap这类操作符，它会同时处理多个内部Observable，完全不管顺序。想要保证顺序的话，得换成concatMap——它会等前一个请求完成后再处理下一个，这样结果顺序就和你发起请求的顺序一致了。

• 其他地方偷偷修改了数组：有没有可能别的订阅或者异步逻辑也在往this.fieldsList里塞元素？比如组件里还有其他地方的subscribe也操作了这个数组，多个异步操作同时推元素，顺序自然就乱了。

• 用RxJS操作符保证异步顺序：
  如果是循环发起请求的场景，用concatMap来串行处理，或者用forkJoin一次性获取所有结果（返回的数组顺序和你传入的Observable顺序完全一致）。举个代码例子：

  // 用concatMap串行处理，保证顺序
  from(yourRequestArray).pipe(
    concatMap(item => this.dataService.fetchData(item))
  ).subscribe(res => {
    this.fieldsList.push(res);
  });
  
  // 用forkJoin批量获取，结果顺序和原请求数组一致
  forkJoin(yourRequestArray.map(item => this.dataService.fetchData(item))).subscribe(allRes => {
    this.fieldsList = [...this.fieldsList, ...allRes];
  });
  

• 换成有序的数据源遍历：如果之前是遍历对象，把它转换成有序数组再处理，比如先把对象的键值对转成数组，按你需要的规则排序后再遍历。

• 排查数组的其他修改源：可以在this.fieldsList.push()那里加个console.log，看看每次推元素的时机和来源，确认是不是有其他异步操作在干扰这个数组的顺序。

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