await 在 forEach 中不生效解决方案|博客系列 | 前端进阶之旅

# 一、场景

function test() {
	let arr = [3, 2, 1]
	arr.forEach(async item => {
		const res = await fetch(item)
		console.log(res)
	})
	console.log('end')
}

function fetch(x) {
	return new Promise((resolve, reject) => {
		setTimeout(() => {
			resolve(x)
		}, 500 * x)
	})
}

test()

@前端进阶之旅: 代码已经复制到剪贴板

期望的打印顺序是

3
2
1
end

@前端进阶之旅: 代码已经复制到剪贴板

结果打印顺序居然是

end
1
2
3

@前端进阶之旅: 代码已经复制到剪贴板

原因

那就是 forEach 只支持同步代码。forEach 并不会去处理异步的情况

# 二、解决办法

# 2.1 第一种是使用 Promise.all 的方式

async function test() {
	let arr = [3, 2, 1]
	await Promise.all(
		arr.map(async item => {
			const res = await fetch(item)
			console.log(res)
		})
	)
	console.log('end')
}