深入浅出写一个多级异步回调从基础到Promise实现的Demo

//需求：f2在f1之后执行，且依赖f1的返回值。如下：
function f1(){
    var s="1";
    return s;
}
function f2(s){
    s+="-2";
    console.log(s);
}
f2(f1()); //"1-2"

//继续，如果f1是个耗时操作，业务上需要做成异步，那么就需要引入回调，如下：
function f1(){
    var s;
    setTimeout(function(){
        s="1";
        f2(s);
    },1000);
}
function f2(s){
    s+="-2";
    console.log(s);
}
f1(); //"1-2"

//对上面代码，对f2做个函数名上的解耦，如下：
function f1(callback){
    var s;
    setTimeout(function(){
        s="1";
        callback(s);
    },1000);
}
function f2(s){
    s+="-2";
    console.log(s);
}
f1(f2); //"1-2"

//这样，不管以后f2的function name如何变更，我们都不需要去f1里修改对他的引用了

//那么，我们继续，如果业务中引入了f3，且逐级依赖异步耗时操作f1和f2。如下：
function f1(){
    var s;
    setTimeout(function(){
        s="1";
        f2(s);
    },1000);
}
function f2(s){
    setTimeout(function(){
        s+="-2";
        f3(s);
    },1000);
}
function f3(s){
    s+="-3";
    console.log(s);
}
f1(); //"1-2-3"
//这时，该怎么对f2和f3的function name解耦，以及怎样保持一个类似f1().f2().f3()样子的清晰的调用呢？

//思来想去，看起来需要引入更多的传参，那搞两个callback参数吧：
function f1(callback1,callback2){
    var s;
    setTimeout(function(){
        s="1";
        callback1(s,callback2);
    },1000);
}
function f2(s,callback){
    setTimeout(function(){
        s+="-2";
        callback(s);
    },1000);
}
function f3(s){
    s+="-3";
    console.log(s);
}
f1(f2,f3); //"1-2-3"
//WTF，尼玛，这也太尼玛脏了。函数名虽然解耦了，调用也很清晰。但是一个callback2参数需要在多个function之间传递，代码可读性变差；并且f1中传入了并不需要处理的callback2，逻辑有些冗余。

//注册自定义事件 拆解f1 f2 f3的依赖回调关系导致的代码逻辑上的嵌套（使用CustomEvent的detail属性，实现参数传递）
document.addEventListener("f1:done",function(e){
    f2(e.detail);
});
document.addEventListener("f2:done",function(e){
    f3(e.detail);
});


function f1(){
    var s;
    setTimeout(function(){
        s="1";
        document.dispatchEvent(new CustomEvent(‘f1:done‘, {detail:s}));
    },1000);
    
}
function f2(s){
    setTimeout(function(){
        s+="-2";
        document.dispatchEvent(new CustomEvent(‘f2:done‘, {detail:s}));
    },1000);
}
function f3(s){
    s+="-3";
    console.log(s);
}

f1(); //"1-2-3"

//继续Promise方式，试着改写一下：

function f1(){
    var p1=new Promise(function(resolve, reject) {
        var s;
        setTimeout(function(){
            s="1";
            resolve(s);
        },1000);
        
    });
    return p1;
}
function f2(s){
    var p2=new Promise(function(resolve, reject) {
        setTimeout(function(){
            s+="-2";
            resolve(s);
        },1000);
        
    });
    return p2;
}
function f3(s){
    s+="-3";
    console.log(s);
}

f1().then(function(s) {
    return f2(s);
}).then(function(s) {
    f3(s);
})

//看起来，还不错哦