js基础-回调地狱与promise对象

异步·promise

什么是回调地狱

1. 现在有个需要需要先执行A，在执行B，
   加入按照下面这么执行会先打印B，在打印A，因为A的延迟比较久。
   不管getA,和getB的位置怎么改变都是一样，因为setTimeout也是异步程序。

       function getA(fn) {
            setTimeout(() => {
                fn('A')
            }, 1000)
        }

        function getB(fn) {
            setTimeout(() => {
                fn('B')
            }, 500)
        }
        //这么执行会先打印b，再打印A，不管getA,和getB的位置怎么改变都是一样
         getA(function (data) {
             console.log(data)
        })
         getB(function (data) {
             console.log(data)
        })

因此我们可以借助回调让异步程序按照我们想要的执行顺序来执行。

 // 现在又个需要需要先执行A，在执行B，
        function getA(fn) {
            setTimeout(() => {
                fn('A')
            }, 1000)
        }

        function getB(fn) {
            setTimeout(() => {
                fn('B')
            }, 500)
        }
        //这么执行会先打印b，再打印A
        // getA(function (data) {
        //     console.log(data)
        // })
        // getB(function (data) {
        //     console.log(data)
        // })
        // 借助回调的方法可以这么写
        getA(function (data) {
            console.log(data)
            getB(function (data) {
                console.log(data)
            })
        })
        // 假设来了A，b，c，d呢，这就形成了回调地狱

如果再来两个b，c，d，e，f那么就产生了如下代码，也就是回调地狱，这样的代码显然是难以维护的。

 getA(function (data) {
            console.log(data)
            getB(function (data) {
                console.log(data)
                getC(function (data) {
                    console.log(data)
                    getD(function (data) {
                        console.log(data) 
                        getE(function (data) {
                            console.log(data)
                            getF(function (data) {
                                console.log(data)
                                getG(function (data) {
                                    console.log(data)
                                    getH(function (data) {
                                        console.log(
                                            data)
                                    })
                                })
                            })
                        })
                    })
                })
            })
        })

解决回调地狱

自从es6出现后，我们便有了解决回调地狱的方法。那就是promise对象
创建一个promise对象我们可以用new关键字,通过.then可以获取到对应的值。

        let p = new Promise(function(resolve){
            resolve('hello world')
        })

        p.then(function(res){
            console.log(res)
        })

加入promiese来看看效果,
这样好看多了

   // 现在又个需要需要先执行A，在执行B，
        function getA() {
            return new Promise(function (resolve) {
                setTimeout(() => {
                    resolve("A")
                }, 500)
            })
        }

        function getB() {
            return new Promise(function (resolve) {
                setTimeout(() => {
                    resolve("B")
                }, 1000)
            })
        }
        getA().then(
            function (data) {
                console.log(data)
                return getB()
            }
        ).then(
            function (data) {
                console.log(data)
                return getB()
            }
        ).then(
            function (data) {
                console.log(data)
                return getB()
            }
        ).then(
            function (data) {
                console.log(data)
                return getB()
            }
        ).then(
            function (data) {
                console.log(data)
                return getB()
            }
        )

通过promise可以让一定程度上让异步回调，代码更易读，但是还是不那么好，这时候引入async ，await,如此让异步代码看起来像同步代码一样。

       async function getdata(){
            let a = await getB()
            let b = await getB()
            console.log(A,b)
        }