JS 异步遍历的实现

JS 异步遍历的实现

背景：需要给对象数组的每一项添加某个属性，属性值来源于接口（即需要遍历数组，循环调用接口添加属性值）

实现方法

示例代码

// 原始数据
let list = [{ id: 1 }, { id: 2 }, { id: 3 }]
// 期望得到的数据[{ id: 1 }, { id: 2, asyncData: 'asyncData2' }, { id: 3, asyncData: 'asyncData3' }]
// 模拟接口调用
async function job(id) {
	return `asyncData${id}`
}
复制代码

forEach 遍历

这可能是很多前端最先想到的方法

function asycTraversal() {
	list.forEach(async item => {
		if (item.id != 1) {
			item.asyncData = await job(item.id)
		}
	})
	console.log(list)
}
复制代码

执行结果是

{ id: 1 }, { id: 2 }, { id: 3 }]
复制代码

因为 forEach 根本不支持异步写法

map 遍历

既然 forEach 不行，那我们再来试试 map 呢

function asycTraversal() {
	list.map(async item => {
		if (item.id != 1) {
			return {
				...item,
				asyncData: await job(item.id),
			}
		} else {
			return item
		}
	})
	console.log(list)
}
复制代码

执行结果是

{ id: 1 }, { id: 2 }, { id: 3 }]
复制代码

结果是 map 遍历也不行。我还试了 entries 遍历，也是不行的。
类似于 map 等传入一个回调函数作为参数的循环方式都无法处理异步

for 循环

async function asycTr