场景

• 需要所有接口加载完毕后再进行处理事情
• 需要优化多个 http/IO 接口嵌套导致性能变慢
• 需要多个任务完成后再进行处理回调

看代码

/*
 * 无数据水桶（仅用于同步加载回调）
 */
function pail(len) {
    return {
        len: len,
        num: 0,
        t_fun: null,
        c_fun: null,
        // 设置正确回调
        then: function (fun) {
            this.t_fun = fun;
            return this;
        },
        // 设置错误回调
        catch: function (fun) {
            this.c_fun = fun;
            return this;
        },
        // 加入|执行 水桶
        pass: function () {
            this.num += 1;
            if (this.num >= this.len) {
                if (this.t_fun) {
                    this.t_fun(this)
                }
            }
        },
        // 执行失败
        fail: function () {
            if (this.c_fun) {
                this.c_fun(this)
            }
        },
        // 是否满足
        is_pass: function () {
            return this.num >= this.len;
        }
    }
}

/*
 * 有数据水桶（对象数据）
 */
function pail2(len) {
    return {
        len: len,
        num: 0,
        data: {},
        t_fun: null,
        c_fun: null,
        // 设置正确回调
        then: function (fun) {
            this.t_fun = fun;
            return this;
        },
        // 设置错误回调
        catch: function (fun) {
            this.c_fun = fun;
            return this;
        },
        // 加入|执行 水桶（并加入数据）
        push: function (key, value) {
            this.data[key] = value;
            this.pass();
        },
        // 加入|执行 水桶
        pass: function () {
            this.num += 1;
            if (this.num >= this.len) {
                if (this.t_fun) {
                    this.t_fun(this)
                }
            }
        },
        // 执行失败
        fail: function () {
            if (this.c_fun) {
                this.c_fun(this)
            }
        },
        // 是否满足
        is_pass: function () {
            return this.num >= this.len;
        }
    }
}

/*
 * 有数据水桶（数组数据）
 */
function pail3(len) {
    return {
        len: len,
        num: 0,
        data: [],
        t_fun: null,
        c_fun: null,
        // 设置正确回调
        then: function (fun) {
            this.t_fun = fun;
            return this;
        },
        // 设置错误回调
        catch: function (fun) {
            this.c_fun = fun;
            return this;
        },
        // 加入|执行 水桶（并加入数据）
        push: function (value) {
            this.data.push(value);
            this.pass();
        },
        // 加入|执行 水桶
        pass: function () {
            this.num += 1;
            if (this.num >= this.len) {
                if (this.t_fun) {
                    this.t_fun(this)
                }
            }
        },
        // 执行失败
        fail: function () {
            if (this.c_fun) {
                this.c_fun(this)
            }
        },
        // 是否满足
        is_pass: function () {
            return this.num >= this.len;
        }
    }
}


// 模拟Vue内请求接口同步加载
let c = pail2(2);  // 构建请求2次的接口加载
c.then(r => {
    console.log("全部加载成功后要干的事情", r.data)
})
.catch(e => {
    console.log("加载失败后干的事情")
})


// 请求用户接口
setTimeout(function() {

    if(true) {
        c.push("user", {name:"张三", sex: "男"})
    } else {
        c.error()
    }

}, 1000)

// 请求金额接口
setTimeout(function() {

    if(true) {
        c.push("money", {amount: 0.12})
    } else {
        c.error()
    }

}, 1000)

本作品采用《CC 协议》，转载必须注明作者和本文链接