JS案例：实现一个简单的任务队列-TaskQueue

目录

前言：

功能设计：

流程设计：

接口设计：

功能实现：

工具函数

任务队列实现

功能验证

写在最后

---

前言：

针对一些大型的秒杀活动，抢票业务，高并发是一个经常遇到的问题，后端人员时常会接触到消息队列这个中间件。对于前端人员而言，使用node开发业务，或者使用浏览器单线程异步渲染时也会遇到堵塞，页面卡死的现象，如何处理大量的数据同时加载或者数据同时请求便成为了老生常谈的话题。
此时一个异步的任务队列或许可以帮助我们缓解这些问题。
任务队列的特点：异步，解耦，削峰

异步是多个任务并发进行，互不依赖；解耦是将业务隔离开，保证任务的运行结果不会影响到其他任务，从而产生堵塞；削峰是指在系统请求量或者负载达到一定峰值时使用缓存延缓或者排队的手段，保证服务或者任务稳定进行

功能设计：

为了达到通过异步执行队列的目的，采用Promise.all()的方式执行队列的defer延时函数，代码中的解耦可以使用messageCenter进行发布订阅，队列的削峰可以使用状态和最大运行峰值来控制函数执行

流程设计：

接口设计：

/**
 * 单条队列
 * defer: 待运行的异步函数
 * params?: defer的参数，也可以用bind直接传递
 * 
 */
export interface IQueue {
    defer: Function
    name?: string
}
/**
 * 队列参数
 * children: 队列列表
 * name: 队列唯一标识
 * result: 运行完成后的结果
 * 
 */
export interface IQueues {
    children: Array<Function>
    name: string
    result?: any[]
}
/**
 * 队列缓存
 */
export type IQueueTemp = {
    [key: string]: IQueues
}
/**
 * 系统队列
 */
export type IQueueList = Array<IQueue>
/**
 * 队列状态 idle:空闲 pending:等待 fulfilled:完成 rejected:失败
 */
export type IState = "idle" | "pending" | "fulfilled" | "rejected"
/**
 * 任务队列参数
 */
export type ITaskQueueProps = {
    maxLen: number
}
/**
 * 任务队列
 */
export type ITaskQueue = {
    readonly fix: string
    props: ITaskQueueProps
    queueTemp: IQueueTemp
    queues: IQueueList
    state: IState
    push: (queue: IQueues) => Promise<void>
    unshift: (length: number) => IQueueList
    run: (reject: any) => unknown
    clear: () => void
}

功能实现：

工具函数

MessageCenter

defer：扁平化Promise

   /**
     * 优化Promise，避免Promise嵌套
     * @returns {Promise,resolve,reject}
     */
    private defer = () => {
        let resolve, reject
        return {
            promise: new Promise<void>((_resolve, _reject) => {
                resolve = _resolve
                reject = _reject
            }),
            resolve, reject
        }
    }

fixStr：根据队列名称存入缓存，添加消息订阅