账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    promise事件队列咋封装?
    17
    0

    问题:

    怎么实现把 promise then 模式的事件暂时封装到一个队列中,然后遍历队列,去执行相应的事件!

    实际场景:

    ajax 层的请求依赖一些共用数据,但是不想在业务层去控制这个依赖的逻辑。想集中到 ajax封装层的事件队列中处理!业务层只需要 提供依赖参数的字段既可!

    备注

    传统的 callback 模式 队列实现

    "use strict";
    
    window.personal = window.personal || {};
    personal.ajax = personal.ajax || {};
    
    let ajaxQueue = [];
    let promiseQueue = [];
    let flag = false;
    
    (function () {
        let _this = this;
        //传统的 callback 模式 队列实现很简单
        this._ajax = function (params) {
            if (!flag) {
                ajaxQueue.push(params);
                return;
            }
    
            $.ajax({
                type: params.type || 'get',
                url: params.url,
                data: params.data || {},
                success: function (data, status, xhr) {
                    params.callback(data, status, xhr);
                },
                error: function (xhr, errorType, error) {
                    params.callback(xhr, errorType, error);
                }
            })
        }
    
    
        this.axiosCallback = function (params) {
            if (!flag) {
                promiseQueue.push(params);
    
            } else {
                return axiosAjax(params, false)
            }
    
    
        }
    
    }).call(personal.ajax);
    
    
    function axiosAjax(params, isPromise = true) {
        params.type = params.type || 'get';
        // get/post 字段不一样!
        const _data = params.type === 'get' ? {
            params: params.data
        } : {
            data: params.data
        };
    
        const _config = Object.assign({
            method: params.type,
            url: params.url
        }, _data);
    
        return axios(_config).then((res = {}) => {
            return isPromise ? res.data : void params.callback(res.data, 100, 'ok');
        }).catch((err = {}) => {
            return isPromise ? err : void params.callback(err, 0, 'err');
        })
    }
    
    _timer(function () {
        if (ajaxQueue.length) {
            console.log('flag=>' + flag)
            personal.ajax._ajax(ajaxQueue.shift());
    
            personal.ajax.axiosCallback(promiseQueue.shift());
        }
    }, 100);
    
    
    setTimeout(function () {
        flag = true;
        console.log('------flag-----')
    }, 1500);
    
    
    /**
     *
     * @param callback
     * @param timeout
     */
    function _timer(callback, timeout = 1000) {
        let _flag = true;
    
        (function _inner() {
            //先执行
            // callback();
            let _timer = _flag && setInterval(() => {
                _timer && clearInterval(_timer);
                //or 后执行
                callback();
                _inner(callback, timeout);
            }, timeout);
        })();
    
        return function close() {
            _flag = false;
        }
    }
    
    
    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部