Promise解决回调地狱问题

话不多少，直接上代码

一： 提前定义Promise，使用 .then调用（有缺陷，，不建议）

        var a1, b2, c3
        // Promise
        var p1 = new Promise((resolve, reject) => {
            setTimeout(() => {
                a1 = 12
                resolve('第yi个promise')
            }, 5000)
        })
        var p2 = new Promise((resolve, reject) => {
            setTimeout(() => {
                b2 = 12
                resolve('第er个promise')
            }, 3000)
        })
        var p3 = new Promise((resolve, reject) => {
            setTimeout(() => {
                c3 = 12
                resolve('第san个promise')
            }, 4000)
        })
        p1.then( res => {
            console.log(res)
            console.log(a1 + b2 + c3);
            return p2
        }).then( res => {
            console.log(res)
            console.log(a1 + b2 + c3);
            return p3
        }).then( res =>{
            console.log(res);
            console.log(a1 + b2 + c3);
        })

　　输出台打印如下

 

 特点：同时打印出来，解决回调地狱是有缺陷的，如果第一个时间长和第一个时间短的效果是不一样的。所以最好不要写这种。

第二种、返回Promise对象，不提前定义（推荐），按照先后顺序执行，第一个没有执行完第二个不会执行。

        var a1, b2, c3
        // Promise
        var p1 = new Promise((resolve, reject) => {
            setTimeout(() => {
                a1 = 12
                resolve('第yi个promise')
            }, 6000)
        })
p1.then(res => {
            console.log(a1 + b2 + c3)
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    b2 = 13
                    console.log(a1 + b2 + c3);
                    resolve('第二个promise')
                }, 1000)
            })
        }).then(res2 => {
            console.log(res2)
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    c3 = 10
                    console.log(a1 + b2 + c3);
                    resolve('第三个promise')
                }, 2000)
            })
        }).then(res3 => {
            console.log(res3)
        })

　　浏览器输出如下

 第三种方法、将Promise对象封装成函数，进行调用。（墙裂推荐）

        function test1() {
            return new Promise( (resolve,reject) => {
                setTimeout( () => {
                    console.log('test1执行并赋值')
                    resolve(111)
                },2000)
            })
        }
        function test2() {
            return new Promise( (resolve,reject) => {
                setTimeout( () => {
                    console.log('test2 5秒后执行并赋值')
                    resolve(222)
                },5000)
            })
        }
        function test3() {
            return new Promise( (resolve,reject) => {
                setTimeout( () => {
                    console.log('test3 3秒后执行并赋值')
                    resolve(333)
                },3000)
            })
        }
        test1().then( res =>{
            console.log(res);
            return test2()
        }).then( res => {
            console.log(res);
            return test3()
        }).then( res =>{
            console.log(res);
        })

　　浏览器输出如下：