前端并发——基于 Promise.race 实现异步并发控制

在论坛闲逛时,无意中看到这篇帖子 大厂面试:别拯救了,拯救不了一点,第一感觉就是,现在前端实习面试这么卷了吗 😂,都考上异步并发控制了。正好自己比较感兴趣,而且上次思考这个问题已经很久了有点生疏,于是马上动手尝试解决!

题目

转载自该贴的原题是这样:

场景:把fn当作一个请求,现在creator中的2表示限制一次性最多只能发送2次请求,超过了2次就需要等上一个执行完毕才能继续。

试问:现连续执行了5次setup请求,如何在creator中限制它的请求数

给出的空壳代码为:

js 复制代码
function creator(count) {
    // fn: () => Promise
    function setup(fn) {

    }
    return setup
}
const setup = creator(2)

setup(fn)
setup(fn)
setup(fn)
setup(fn)
setup(fn)

function fn() {
    return new Promise((resolve) => {
        setTimeout(() => {
            console.log(1)
            resolve(1)
        }, 2000)
    })
}

思路

并发思路大概是这样:

  1. 利用 Promise.race 可以处理执行最快的 Promise 对象这个特性,可以初始化一个大小为并发数的执行池用 race 执行。
  2. 有执行池就需要替换掉已经执行完成的任务。只要在执行后加一个 then 方法返回当前任务的数组下标就可以进行替换处理。

题目还是比较有意思的,比起常见的并发控制器的封装传参为并发控制数和异步方法数组,这里支持通过多次调用去动态增加需要执行的异步函数。

我们都知道宏任务是在下一次事件循环才会进行执行调用,那么这里我们可以将整个并发放在一个宏任务 里边,就支持在同步代码里(应该也可以在微任务里)多次调用setup()去进行并发处理。

这里的思路描述比较简单,具体可以看实现代码的注释去理解~~

实现

为了更好的验证并发控制是否成功,这里我将题目里的打印改成打印 Date() ,具体完整代码如下

js 复制代码
function creator(count) {
    const arr = [];
    let flag = true;

    function setup(fn) {
        arr.push(fn);
        // 包一层异步,让同步调用全部进来
        flag && setTimeout(() => {
            // 并发执行容器,初始化长度为 count
            const promises = arr.splice(0, count).map((item, index) => {
                // 返回下标,用户执行容器的替换
                return item().then(() => index);
            })

            // 真正执行过程开始,此时 arr 中为第一轮排不上的异步任务
            arr.reduce((pres, curFn) => {
                return pres.then(() => {
                    return Promise.race(promises); // 返回先完成的下标
                }).then(fastestIndex => {
                    // 要继续将这个下标返回,以便下一次遍历
                    promises[fastestIndex] = curFn().then(() => fastestIndex);
                })
            }, Promise.resolve());
        }, 0) && (flag = false);// flag 控制异步只调用一次
    }
    return setup
}
const setup = creator(2)

setup(fn)
setup(fn)
setup(fn)
setup(fn)
setup(fn)

function fn() {
    return new Promise((resolve) => {
        setTimeout(() => {
            console.log(Date())
            resolve(1)
        }, 2000)
    })
}

执行结果:

从结果来看,也算是把这个题目给解决了!当然,异步并发控制有非常多的场景,有很多不同的、性能更好的解决方法,本文的方法只是作为一个参考。

如果大家有更好的思路或者对并发控制性能上有什么想法的话欢迎评论或者私信交流!👏

这里是 Storm⚡️,一个前端开发学习者

相关推荐
晓13132 小时前
JavaScript加强篇——第七章 浏览器对象与存储要点
开发语言·javascript·ecmascript
海底火旺2 小时前
浏览器渲染全过程解析
前端·javascript·浏览器
前端付豪2 小时前
15、前端可配置化系统设计:从硬编码到可视化配置
前端·javascript·架构
aPurpleBerry2 小时前
hot100 hot75 栈、队列题目思路
javascript·算法
颜漠笑年2 小时前
可迭代对象≠数组,一起来揭开for...of背后隐藏的秘密吧
前端·javascript
脑袋大大的3 小时前
判断当前是否为钉钉环境
开发语言·前端·javascript·钉钉·企业应用开发
军军君013 小时前
基于Springboot+UniApp+Ai实现模拟面试小工具二:后端项目搭建
前端·javascript·spring boot·spring·微信小程序·前端框架·集成学习
江城开朗的豌豆5 小时前
退出登录后头像还在?这个缓存问题坑过多少前端!
前端·javascript·vue.js
江城开朗的豌豆5 小时前
Vue的'读心术':它怎么知道数据偷偷变了?
前端·javascript·vue.js
江城开朗的豌豆6 小时前
手把手教你造一个自己的v-model:原来双向绑定这么简单!
前端·javascript·vue.js