leetcode | 手写Promise.all()函数(第一天)

前言

契机:最近在搞微前端,在调研各种解决方案,思考如何整合公司目前的项目,头都大了。想换换脑子,决定每天在leetcode网站随机刷一道题。

希望自己可以坚持下去吧,也不用多久,21天即可。

刷题还蛮有意思的,当完成一道题的解法时,还蛮有成就感的。

就是玩,题目随机~

题目

思路

从题干中我们可以得到以下信息:

  1. 输入参数是一个数组,数组中是一个个promise函数
  2. 返回值是一个promise函数
  3. 数组中的所有promise函数并行执行,全部成功后将每个函数返回的结果,按照数组中函数的顺序组成一个结果数组返回,若有一个函数执行失败,立即用错误拒绝该promise。

解题方法

  1. promiseAll函数返回一个新的promise
  2. 若参数functions为空数组时,返回\[\]
  3. 定义一个数组res,长度就是传入数组的长度,初始值为null, 用于记录数组中的函数全部执行成功后的结果
  4. 定义一个resolveCount记录完成resolve的函数的数量,当resolveCount等于输入数组的长度时,返回res
  5. 为了拿到数组中所有函数执行完毕后的值,故需要使用async await来处理, 使用try...catch来捕获错误,结束promise

代码

js 复制代码
/**
 * 重写promise内置函数Promise.all()功能
 * @param {Array<Function>} functions
 * @return {Promise<any>}
 */
const promiseAll = async function(functions) {
    return new Promise((resolve,reject) => {
        if(functions.length === 0) {
            resolve([])
            return
        }

        // 传入的数组长度
        let len = functions.length
        // 根据传入的函数的个数生成对应的数组个数,初始化值为null
        const res = new Array(len).fill(null)
        // 已完成resolve的函数个数
        let resolvedCount = 0

        functions.forEach(async (fun,index) => {
            try {
                const result = await fun()

                // 为什么不使用push?这种方式可以按照顺序将返回结构放置进结果数组中
                res[index] = result
                resolvedCount++

                // 全部函数都成功后将结果以数组形式返回
                if(functions.length === resolvedCount) {
                    resolve(res)
                }
            } catch (err) {
                reject(err)
            }

        })
    })
    
};

/**
 * const promise = promiseAll([() => new Promise(res => res(42))])
 * promise.then(console.log); // [42]
 */

后记

并行执行异步函数是leetcode网站上的原题,里面有具体写法,也可以运行测试。

相关推荐
2分钟速写快排1 小时前
孔乙己的茴字有多少种写法?|AI 对话实时通信的三种实现
前端·javascript·github
用户0044729538257 小时前
练歌镜:让眼镜听懂“循环这一句”
javascript
yuyuxun110 小时前
协同过滤的校园二手物品智能推荐系统的设计与实现 毕业设计-附源码40082
javascript·vue.js·spring boot·python·数据分析·django·课程设计
文丑颜不良啊12 小时前
LeetCode2821~2840题目解析
java·leetcode
总要学点什么13 小时前
第105篇:三维特效-流动图片墙体效果——让箭头沿墙长滚,它俩竟是同一份代码
开发语言·javascript·ecmascript·gis·webgl·材质·cesium
Agent世界15 小时前
用 CDP 做发布自动化:四道机器闸门与产物验收
前端·javascript
总要学点什么15 小时前
第104篇:三维特效-流动墙体效果——让贴图沿墙流动,它却只肯走一条对角线
开发语言·javascript·ecmascript·gis·webgl·材质·cesium
程序员大阳15 小时前
副队长ES6+教程(3)--解构赋值
前端·javascript·es6·赋值·解构
神膘护体小月半15 小时前
css - 元素背景图由 hover 触发,初次加载时闪动的解决办法
前端·javascript·css
程序员大阳16 小时前
副队长ES6+教程(2)--let 与 const
前端·javascript·es6·const·let·var