由于JavaScript里面很多是事件驱动型的函数,当然,Event-Driven有很多好处,但是有时候也比较麻烦。

最近就遇到一个问题,连续的多个异步处理,连着来,当然通过回调(CallBack)也是能够实现,但是代码写出来真是不好看。。。

下面是大概的例子

    doSomething(CallBack) {
        setTimeout(() => CallBack(), 2000);
    }

    doWork(CallBack) {
        this.doSomething(() =>{
            console.log("1") 
            this.doSomething(() =>{
                console.log("2") 
                this.doSomething(() =>{
                    console.log("3") 
                    this.doSomething(CallBack)
                })
            })
        });
    }

这个例子有很多不方便,比如中间跳出之类的,特别是个人感觉。。。嘿嘿,从美学的角度感觉很不愉快,所以稍微调查了下Promise-Chain的写法

    doSomething() {
        new Promise((resolve, reject) => {
            console.log("Start A lot of Job");            
            setTimeout(() => resolve(1), 1000);
        }).then((result) => {
            return this.doSomething1(result)
        }).then((result) => {
            return this.doSomething2(result)
        }).then((result) => {
            return this.doSomething3(result)
        }).then((result) => {
            console.log("Result :" + result)
            console.log("Everything Done!!!")
        }).catch((Err) => {
            console.log("Error " + Err);
            return;
        });
    }

    doSomething1(result) {
        console.log("doSomething1 " + result);
        var a = new Promise((resolve, reject) => {
            result = result * 2
            setTimeout(() => {
                //this.doSomething2(result);
                resolve(result * 2);
            }, 1000);
        }).then(null, function () {
            throw ("doSomething1 Error");
        });
        return a;

    }

    doSomething2(result) {
        console.log("doSomething2 " + result);
        return new Promise((resolve, reject) => {
            result = result * 2
            // 正常系
            // setTimeout(() => {
            //     //this.doSomething2(result);
            //     resolve(this.doXXX(result * 3));
            // }, 2000);
            // 异常系 1
            setTimeout(() => {
                //this.doSomething2(result);
                reject('');
            }, 2000);
            // 异常系 2
            // throw ("doSomething2 Error");
        }).catch(() => {
            throw ("doSomething2 Error");
        });
    }

通过这个可以很容易实现跳出…等等,另外关键的是看上去比较愉快,哈哈。

大概就这样。

最后修改日期: 2022年6月13日

作者