WebSorcet 回调转 Pormise task

需求

页面需要对接本地门禁读卡器，实现门禁卡读写功能。

当前门禁卡通过本地服务插件与页面建立 websorcet 通信, 实现读写卡操作。

问题

通信响应需要通过监听回调函数， 更具对应的类型及自定义UID 判断处理方式。

造成调用与响应处理业务逻辑的分离，当前希望实现类型, 接口调用的模式。将调用与处理逻辑聚合在一起。

例子

const ws = new WebSocket("ws://127.0.0.1:3000")

const promiseTask = new CallbackToPromiseTask()
promiseTask.clear()

// 绑定监听
wx.onmessage(response =>{
    const { resolve， reject } = promiseTask.shift(response.UID)
    
    if(response.err){ reject(response.err); return }
    resolve(response)
})

const send = async (data) => {
    const [ task, UID ] = promiseTask.push()
    
    wx.send({ ...data, UID })
    
    const back = awiat task
    
    console.log(back)
}

实现

/**
 * 计数器
 */
class Counter {

    constructor(initNum=-1){
        this._initNum = initNum
        this._count = initNum
    }

    get count() {
        return this._count
    }
    
    add (){
        this._count+=1
        return this
    }
    
    reset(){
        this._count = this._initNum
        return this
    }
    
    static create(...args){
        return new Counter(...args)
    }
}



/**
 * 响应回调转 promise 任务队列
 * @prop _count
 */
export class CallbackToPromiseTask {
    
    static create(...args){
        return new CallbackToPromiseTask(...args)
    }

    constructor(counter=Counter){

        this._counter = counter.create() // 计数器，生产任务编号
        this._tasks = new Map() // 任务池
        this._keys = [] // 编号队列
    }

    _reset(){
        this._counter.reset()
        this._tasks = new Map()
        this._keys = []
    }
    
    /**
     * 添加任务
     * @param { any } data 默认回传参数
     * @returns [ Promise, key ]  [ 等待响应 promise 对象,  任务编号 ]
     */
    push (data){
        
        const _this = this
        const _key = this._counter.add().count

        _this._keys.push(_key)
        
        return [

            new Promise((resolve, reject) =>{
                _this._tasks.set( _key, { resolve, reject, data, _key })
            }),

            _key
            
        ]
           
    }

    /**
     * 调出任务
     * @param { any } key 任务编号 
     * @param { function } notFind 查询任务失败回调
     * @returns { task | undefined } 返回缓存的任务对象
     */
    shift(key, notFind){

        if(key !== undefined){
            this._keys = this._keys.filter(item => item !== key)
        }else{
            key = this._keys.shift()
        }

        if(!this._tasks.has(key)){

            if(!notFind){
                console.error(`task ${key} is undefined`) 
            }else{
                notFind(key)
            }

            return
             
        }

        const task = this._tasks.get(key)
        this._tasks.delete(key)
        return task
    }

    // 清除调用
    clear(type='reject'){

        this._tasks.forEach((item, key) => {
            item[type](item.data)
        })

        this._reset()
        
    }   

    /**
     * 快速执行队列任务
     * 根据任务编号取的任务并使用,默认参数执行
     * 类似模拟单一顺序执行任务
     */
    run(){
        const task = this.shift()
        task.resolve(task.data)
    }
    
}