js之模拟一个类似于Promise的函数去同步异步的处理

 写前端的时候经常在写Promise, 从来没有理解过Promise中的原理如何, Promise函数的结构非常巧妙,  简单的模拟一下

//模拟一个类似于Promise的函数去同步异步的处理
function MyPromise(func){
    let vm = this;
    vm.executed = false;//表明是否已执行mythen的回调
    vm.resolve = function(data){
        if(!vm.executed){
            vm.executed = true;
            try{
                //执行then的回调函数 这里的回调可以是一个数组, 依次执行回调
                vm.mythenCallback(data);
            }catch(e){
                try {
                    //then的回调函数执行失败, 执行catch的回调函数
                    vm.mycatchCallback(e);
                } catch (e2) {
                    console.log(e2);
                }
            }
        }
    }
    vm.reject = function(data){
        try{
            //执行catch的回调函数
            vm.mycatchCallback(data);
        }catch(e){
            console.log(e);
        }
    }
    //相当于then的回调函数
    vm.mythen = function(callback){
        vm.mythenCallback = callback;
        return vm;
    }
    //相当于catch的回调函数
    vm.mycatch = function(callback){
        vm.mycatchCallback = callback;
        return vm;
    }
    func(vm.resolve,vm.reject);
}

测试代码

new MyPromise(function(r,j){
    setTimeout(() => {
        r("MyPromise 测试1");
    }, 200);
}).mythen(function(res){
    console.log("res=",res);
    new MyPromise(function(r,j){
        setTimeout(() => {
            r("MyPromise 测试2");
        }, 100);
    }).mythen(function(res2){
        console.log("res2=",res2);
    }).mycatch(function(err){
        console.log("err=",err);
    })
}).mycatch(function(err){
    console.log("err=",err);
})

结果