实践[JavaScript] Promise.allSettled 函数的实现与应用

Promise.allSettled 函数的作用是等待一组promise,并在所有等待的promise处理完成后,返回相对应的结果,结果以数组的形式传递给下一节点。

我们在开发项目时遇到一个需求,那就是多表单校验,并需要对每个报错的表单进行一些操作,同时在所有的表单处理完成后,将通过校验的表单上传给后台。

为了解决这个需求,我们实现了两种方案,一种是对每个表单的validate进行封装,并通过withResolvers返回reject自己手动处理每个异常,外部使用Primise.all接收。而第二种就是通过Promise.allSettled来实现多表单一部校验同步等待功能。这两种方式所实现的效果是一样的。但如果关注结果顺序,则二者返回的数据则会有些许区别

使用Promise.allSettled实现

ts 复制代码
/**
 * 随机,对2取余,返回true,否则返回false
 * @returns 
 */
function validate(index: number) {
    const flag = parseInt((Math.random() * 10).toFixed(0)) % 2
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            flag ? (resolve({ index, flag })) : reject({ index, flag })
        }, Math.random() * 200)
    })
}
function saveData(res: any) {
    return Promise.resolve()
}
(async () => {
    console.log('tset promise allsettled')
    const res = await Promise.allSettled([validate(1), validate(2), validate(3), validate(4), validate(5)])
    // 获取通过校验的表单
    const list = res.filter(item => item.status === 'fulfilled')
    // 保存操作
    await saveData(list)
    console.log(res)
    /**
     * [
    *    { status: 'fulfilled', value: { index: 1, flag: 1 } },
    *    { status: 'rejected', reason: { index: 2, flag: 0 } },
    *    { status: 'rejected', reason: { index: 3, flag: 0 } },
    *    { status: 'fulfilled', value: { index: 4, flag: 1 } },
    *    { status: 'rejected', reason: { index: 5, flag: 0 } }
    *  ]
     */

})()

我们基于Promise.all封装的结果如下所示

ts 复制代码
/**
 * 随机,对2取余,返回true,否则返回false
 * @returns 
 */
function validate(index: number) {
    const flag = parseInt((Math.random() * 10).toFixed(0)) % 2
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            flag ? (resolve({ index, flag })) : reject({ index, flag })
        }, Math.random() * 200)
    })
}
function saveData(res: any) {
    return Promise.resolve()
}
function allSettled(args: Promise<any>[]) {
    if (!Array.isArray(args)) {
        throw Error("非数组")
    }
    const callList: Promise<any>[] = []
    for (let index in args) {
        function func() {
            return new Promise((resolve) => {
                const call = args[index]
                call.then((res) => {
                    resolve({ status: 'fulfilled', value: res })
                }).catch((res) => {
                    resolve({ status: 'reject', value: res })
                })
            })
        }
        callList.push(func())
    }
    return Promise.all(callList)
}
(async () => {
    console.log('tset promise allsettled')
    const res = await allSettled([validate(1), validate(2), validate(3), validate(4), validate(5)])
    // 获取通过校验的表单
    const list = res.filter(item => item.status === 'fulfilled')
    // 保存操作
    await saveData(list)
    console.log(res)
    /**
     * [
     *  { status: 'fulfilled', value: { index: 1, flag: 1 } },
     *  { status: 'reject', value: { index: 2, flag: 0 } },
     *  { status: 'reject', value: { index: 3, flag: 0 } },
     *  { status: 'fulfilled', value: { index: 4, flag: 1 } },
     *  { status: 'fulfilled', value: { index: 5, flag: 1 } }
     * ]
     */

})()

核心代码: 该函数是通过包裹一层Promise并在异常时捕获异常,并通过resolve返回,最后通过all实现join,等待所有promise全部执行

ts 复制代码
function allSettled(args: Promise<any>[]) {
    if (!Array.isArray(args)) {
        throw Error("非数组")
    }
    const callList: Promise<any>[] = []
    for (let index in args) {
        function func() {
            return new Promise((resolve) => {
                const call = args[index]
                call.then((res) => {
                    resolve({ status: 'fulfilled', value: res })
                }).catch((res) => {
                    resolve({ status: 'reject', value: res })
                })
            })
        }
        callList.push(func())
    }
    return Promise.all(callList)
}
相关推荐
枷锁—sha3 分钟前
【DVWA系列】——CSRF——Medium详细教程
android·服务器·前端·web安全·网络安全·csrf
枷锁—sha4 分钟前
跨站请求伪造漏洞(CSRF)详解
运维·服务器·前端·web安全·网络安全·csrf
群联云防护小杜20 分钟前
深度隐匿源IP:高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip
汉得数字平台38 分钟前
【鲲苍提效】全面洞察用户体验,助力打造高性能前端应用
前端·前端监控
花海如潮淹1 小时前
前端性能追踪工具:用户体验的毫秒战争
前端·笔记·ux
_丿丨丨_6 小时前
XSS(跨站脚本攻击)
前端·网络·xss
天天进步20156 小时前
前端安全指南:防御XSS与CSRF攻击
前端·安全·xss
拾光拾趣录8 小时前
括号生成算法
前端·算法
拾光拾趣录9 小时前
requestIdleCallback:让你的网页如丝般顺滑
前端·性能优化
前端 贾公子9 小时前
vue-cli 模式下安装 uni-ui
前端·javascript·windows