«

JS异步遍历如何实现

时间:2024-5-3 17:48     作者:韩俊     分类: Javascript


今天小编给大家分享一下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' })]

    标签: javascript

    热门推荐