ES6—promise

ES6—promise

一：
如果产生需求：多个异步函数必须顺序执行，可以两步来解决：
1、定义前一项任务时，就要定义回调函数参数，并在自己的任务执行完之后自动调用回调函数。
2、调用时，将要做的下一件事，包裹在一个匿名函数中作为参数传入前一个函数中

如下面代码所示：使用callback来完成这个功能：

执行aa->bb->cc->console.log(“end”)

<script>
    function aa(callback) {
        console.log("go...");
        setTimeout(function () {
            console.log("finish");
            //写在这里的代码一定会在亮到达终点后才执行
            callback();
        },6000)
    }
    function bb(callback) {
        console.log("go to...");
        setTimeout(function () {
            console.log("finished");
            callback();
        },4000)
    }
    function cc(callback){
        console.log("go to to...");
        setTimeout(function () {
            console.log("finisheed");
            callback();
        },3000)
    }
    aa(
        //在aa开始调用时，就把下一项任务提前托付给aa，任务中就一句话："bb();"
        function () {//弊端：产生回调地狱
            bb(
                function () {
                    cc(
                        function () {
                            console.log("end");
                        }
                    );
                }
            );
        }
    );
    //最后输出end
</script>

输出结果如下图：

这种实现方法弊端是会产生**“回调地狱”**

二：
使用promise来解决这个问题
promise基本的原理:把函数内容包成一块一块的，然后开一个口open()传给下一个执行的函数
使用方法为.then()

用return new Promise(function(open){
//内容
open (add)//add为要传下去的参数值
})
代码：

<script>
    function aa() {
        return new Promise(function (open) {
            var add="oil";//生产oil，接力传下去
            console.log(`${add}`);
            console.log("go...");
            setTimeout(function () {
                console.log("finish");
                open(add);//open,告诉下面可以执行了，下传
            },6000)
        })
    }
    function bb(addd) {//addd接收从上面传下来的add值
        return new Promise(function (open) {
            console.log(`${addd}`);
            console.log("go to...");
            setTimeout(function () {
                console.log("finished");
                open(addd);
            },4000)
        })
    }
    function cc(adddd){
        return new Promise(function (open) {
            console.log(`${adddd}`);
            console.log("go to to...");
            setTimeout(function () {
                console.log("finisheed");
                open(adddd);
            },3000)
        })
    }
    aa()
    .then(bb)//aa完事后执行bb
    .then(cc)//bb完事后执行cc
    .then(function (addddd) {//接收上面传下来的adddd
        console.log(`${addddd}`);
        console.log("over");
    })
</script>

执行结果如下所示：