快捷導(dǎo)航

JS 異步遍歷的實(shí)現(xiàn)方法

更新時(shí)間：2023年04月23日 09:37:40 作者：小野_

本文主要介紹了JS 異步遍歷的實(shí)現(xiàn)方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

實(shí)現(xiàn)方法

示例代碼

// 原始數(shù)據(jù)
let list = [{ id: 1 }, { id: 2 }, { id: 3 }]
// 期望得到的數(shù)據(jù)[{ id: 1 }, { id: 2, asyncData: 'asyncData2' }, { id: 3, asyncData: 'asyncData3' }]
// 模擬接口調(diào)用
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)
}

執(zhí)行結(jié)果是

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

因?yàn)?forEach 根本不支持異步寫(xiě)法

map 遍歷

既然 forEach 不行，那我們?cè)賮?lái)試試 map 呢

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

執(zhí)行結(jié)果是

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

結(jié)果是 map 遍歷也不行。我還試了 entries 遍歷，也是不行的。
類(lèi)似于 map 等傳入一個(gè)回調(diào)函數(shù)作為參數(shù)的循環(huán)方式都無(wú)法處理異步

for 循環(huán)

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')
}

執(zhí)行結(jié)果是

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

for 循環(huán)好像不行？我們?cè)僭囋?await 關(guān)鍵字

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')
}

執(zhí)行結(jié)果是

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

這樣寫(xiě)是得到了我們的的期望的結(jié)果，但很明顯循環(huán)中的異步是串行執(zhí)行的，時(shí)間復(fù)雜度是 O(n)。
我們希望他可以并行執(zhí)行，并且還要保證所有的異步都執(zhí)行完畢才執(zhí)行下一步。并行執(zhí)行我們留到最后說(shuō)。

for-of 循環(huán)

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')
}

執(zhí)行結(jié)果是

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

這種寫(xiě)法與 for 循環(huán)一樣，異步也是串行執(zhí)行的。

我們?cè)僭囋?then 的寫(xiě)法

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')
}

執(zhí)行結(jié)果是

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

與 for 循環(huán)一樣，使用 then 方法也是不行的。雖然 await 是可以的，但是這有一個(gè)弊端，就是不能像在 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')
}

執(zhí)行結(jié)果是

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

這種寫(xiě)法異步也是串行執(zhí)行的。

我們?cè)僭囋?then 的寫(xiě)法

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 中的弊端。但不影響它的異步還是串行執(zhí)行的。

Promise.all

最后終于可以來(lái)到并行執(zhí)行的環(huán)節(jié)了

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')
}

執(zhí)行結(jié)果是

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

好尷尬，執(zhí)行時(shí)間變長(zhǎng)了 T_T。大家可能跟我有一樣的疑惑不是并行執(zhí)行的嗎，執(zhí)行時(shí)長(zhǎng)更短才對(duì)呀?。?！
沒(méi)關(guān)系，其實(shí)是因?yàn)楫惒綄?xiě)得很簡(jiǎn)單，實(shí)際應(yīng)用中，比如發(fā)起網(wǎng)絡(luò)請(qǐng)求，請(qǐng)求的時(shí)長(zhǎng)就會(huì)很長(zhǎng)，就可以看出并行執(zhí)行的優(yōu)勢(shì)了。
這里我還是模擬一下異步函數(shù)執(zhí)行時(shí)間比較長(zhǎng)的情況吧

// 這里我們更新一下job函數(shù)
function job(id) {
	return new Promise(resolve => {
		setTimeout(() => {
			resolve(`asyncData${id}`)
		}, id * 2000)
	})
}

Promise.all 的執(zhí)行結(jié)果

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

而其他串行執(zhí)行的方法，執(zhí)行時(shí)長(zhǎng)為

111: 10.016s

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

TODO 但是這里有個(gè)問(wèn)題 T_T，更新后的 job 函數(shù),for-await-of 用 then 的寫(xiě)法失靈了，得不到我們期望了結(jié)果了，也是無(wú)解，期望大家來(lái)幫忙解答一下

附加內(nèi)容

既然 forEach 不支持異步遍歷，那我們自己來(lái)實(shí)現(xiàn)一個(gè)可以異步遍歷的 forEach 吧

// 并行實(shí)現(xiàn)
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)
}
// 串行實(shí)現(xiàn)
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()

執(zhí)行結(jié)果都是