遍历数组使用await导致乱序

遍历数组使用await导致乱序

错误代码：

getList(){
	let res = await this.api.CataLogApi.processHistory(this.workflowid)
	      this.auditList = []
	        res.forEach(async item => {
	        // 简化后的逻辑
	            let resName = await this.api.CommonApi.findUserInfoByUser(item.userid)
	            this.auditList.push({name:resName.NAME})
	        })
 }

缺陷：因为接口返回不是顺序的，所以导致明明res是按照时间排序好了返回给我的，遍历的时候又请求了接口导致最终的auditList是乱序。

解决代码

getList(){
	let res = await this.api.CataLogApi.processHistory(this.workflowid)
	      this.auditList = []
	        res.forEach(item => {
	        // 简化后的逻辑
	            this.auditList.push({name:''})
	        })
	        this.formatName()
	}
formatName(){
	this.auditList.forEach(async item => {
	        // 简化后的逻辑
	        let resName = await this.api.CommonApi.findUserInfoByUser(item.userid)
	        item.name = resName.NAME
	})
}

解决思路：在getList里面，将数据顺便赋值给auditList，之后再调用接口请求刷新name这个字段。就不会将auditList搞乱了。所以不要动态的给数组item，而是要一口气顺序给掉，之后再写逻辑。

更新

刚刚重读了一下ES6文档，forEach中的await都是并发执行的，但是由于我们后端返回的数据是排好序的，需要await继发执行，所以可以使用for…of循环。