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 asycTraversal() {
	console.time('111')
	for (let i = 0; i < list.length; i++) {
		job(list[i].id).then(res => {
			list[i].id !== 1 && (list[i].asyncData = res)
		})
	}
	console.log('list', list)
	console.timeEnd('111')
}

执行结果是

{ id: 1 }, { id: 2 }, { id: 3 }]

for 循环好像不行？我们再试试 await 关键字

async function asycTraversal() {
	console.time('111')
	for (let i = 0; i < list.length; i++) {
		list[i].id !== 1 && (list[i].asyncData = await job(list[i].id))
	}
	console.log('list', list)
	console.timeEnd('111')
}

执行结果是

list [
  { id: 1 },
  { id: 2, asyncData: 'asyncData2' },
  { id: 3, asyncData: 'asyncData3' }
]
111:4.418ms

这样写是得到了我们的的期望的结果，但很明显循环中的异步是串行执行的，时间复杂度是 O(n)。
我们希望他可以并行执行，并且还要保证所有的异步都执行完毕才执行下一步。并行执行我们留到最后说。

for-of 循环

async function asycTraversal() {
	console.time('111')
	for (const item of list) {
		item.id !== 1 && (item.asyncData = await job(item.id))
	}
	console.log('list', list)
	console.timeEnd('111')
}

执行结果是

list [
  { id: 1 },
  { id: 2, asyncData: 'asyncData2' },
  { id: 3, asyncData: 'asyncData3' }
]
111:4.286ms

这种写法与 for 循环一样，异步也是串行执行的。

我们再试试 then 的写法

async function asycTraversal() {
	console.time('111')
	for (const item of list) {
		job(item.id).then(res => {
			item.id !== 1 && (item.asyncData = res)
		})
	}
	console.log('list', list)
	console.timeEnd('111')
}

执行结果是

{ id: 1 }, { id: 2 }, { id: 3 }]

与 for 循环一样，使用 then 方法也是不行的。虽然 await 是可以的，但是这有一个弊端，就是不能像在 then 方法里面做一些其他的操作。

for-await-of

async function asycTraversal() {
	console.time('111')
	for await (const item of list) {
		item.id !== 1 && (item.asyncData = await job(item.id))
	}
	console.log('list', list)
	console.timeEnd('111')
}

执行结果是

list [
  { id: 1 },
  { id: 2, asyncData: 'asyncData2' },
  { id: 3, asyncData: 'asyncData3' }
]
111:4.452ms

这种写法异步也是串行执行的。

我们再试试 then 的写法

async function asycTraversal() {
	console.time('111')
	for await (const item of list) {
		job(item.id).then(res => {
			item.id !== 1 && (item.asyncData = res)
		})
	}
	console.log('list', list)
	console.timeEnd('111')
}

哇哦，也是可以的，这样我们就解决了 for-of 中的弊端。但不影响它的异步还是串行执行的。

Promise.all

最后终于可以来到并行执行的环节了

async function asycTraversal() {
	console.time('111')
	const listPromises = list.map(item => {
		return new Promise(async resolve => {
			if (item.id == 1) {
				resolve(item)
			} else {
				resolve({
					...item,
					asyncData: await job(item.id),
				})
			}
		})
	})
	await Promise.all(listPromises).then(res => {
		list = res
	})
	console.log('list', list)
	console.timeEnd('111')
}

执行结果是

list [
  { id: 1 },
  { id: 2, asyncData: 'asyncData2' },
  { id: 3, asyncData: 'asyncData3' }
]
111:5.073ms

好尴尬，执行时间变长了 T_T。大家可能跟我有一样的疑惑不是并行执行的吗，执行时长更短才对呀！！！
没关系，其实是因为异步写得很简单，实际应用中，比如发起网络请求，请求的时长就会很长，就可以看出并行执行的优势了。
这里我还是模拟一下异步函数执行时间比较长的情况吧

// 这里我们更新一下job函数
function job(id) {
	return new Promise(resolve => {
		setTimeout(() => {
			resolve(`asyncData${id}`)
		}, id * 2000)
	})
}

Promise.all 的执行结果

list [
  { id: 1 },
  { id: 2, asyncData: 'asyncData2' },
  { id: 3, asyncData: 'asyncData3' }
]
111: 6.010s

而其他串行执行的方法，执行时长为

111: 10.016s

可以看出还是差了近一半。

TODO 但是这里有个问题 T_T，更新后的 job 函数,for-await-of 用 then 的写法失灵了，得不到我们期望了结果了，也是无解，期望大家来帮忙解答一下

附加内容

既然 forEach 不支持异步遍历，那我们自己来实现一个可以异步遍历的 forEach 吧

// 并行实现
async function _forEach(arr, fn) {
	const fns = []
	for (let i = 0; i < arr.length; i++) {
		const item = arr[i]
		fns.push(fn(item, i, arr))
	}
	await Promise.all(fns)
}
// 串行实现
async function _forEach(arr, fn) {
	for (let i = 0; i < arr.length; i++) {
		const item = arr[i]
		await fn(item, i, arr)
	}
}
// 使用
async function asycTraversal() {
	await _forEach(list, async item => {
		item.id !== 1 && (item.asyncData = await job(item.id))
	})
	console.log('list', list)
}
asycTraversal()

执行结果都是

list[({ id: 1 }, { id: 2, asyncData: 'asyncData2' }, { id: 3, asyncData: 'asyncData3' })]

以上就是“JS异步遍历如何实现”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注亿速云行业资讯频道。