什么是回调地狱以及怎样解决回调地狱

回调地狱：

        指的是在一个回调函数里面再嵌套一层回调函数，层层嵌套，虽然并不会影响其正常运行，但很影响观感。

        例如：

//需要 引入 axios
<script src="./day1/axios.js"></script>

<script>
        // 获取到省区列表
        axios.get('http://hmajax.itheima.net/api/province').then(({data:res})=>{
            const pname = res.list[0]
            // 获取到城市列表
            axios('http://hmajax.itheima.net/api/city?pname=' + pname).then(({data:res})=>{     
                const cname = res.list[0]
                // 获取到地区列表
                axios('http://hmajax.itheima.net/api/area?pname=' + pname + '&' + 'cname=' + cname).then(({data:res})=>{
                    const area = res.list[5]
                    console.log(area) // 海淀区
                })
            })
        })
</script>

这就是典型的回调地狱的写法，跟 ’俄罗斯套娃‘ 一样 ，那怎样避免这样的套娃行为呢？

这就要需要用到promise了

以下就是使用promise优化过的代码：

<script src="./axios.js"></script>
    <script>
        let pname
        // 获取到省区列表
        axios('http://hmajax.itheima.net/api/province').then(res=>{
            pname = res.data.list[3]
            // 获取到城市列表
            return axios('http://hmajax.itheima.net/api/city?pname='+pname)
        }).then(res=>{
            cname = res.data.list[3]
            // 获取到地区列表
            return axios('http://hmajax.itheima.net/api/area?pname='+pname+'&'+'cname='+cname)
        }).then(res=>{
            return res.data.list[3]
        }).then(res=>{
            console.log(res) // 平顺县
        })
    </script>

 当然这样也写，也只是解决了上面代码的套娃的行为，并没有进行真正的优化。

要想做到简化代码就需要用到promise里面的_async和await

使用了_async和await以后，代码就变得非常简洁美观了：

<script src="./axios.js"></script>
    <script>
        // async await 可以直接接受 Promise 的 值
        async function ajax(){
             // 获取到省区列表
            const p = await axios('http://hmajax.itheima.net/api/province')
            pname = p.data.list[3]
             // 获取到城市列表
            const c = await axios('http://hmajax.itheima.net/api/city?pname='+pname)
            const cname = c.data.list[4]
            // 获取到地区列表
            const d = await axios('http://hmajax.itheima.net/api/area?pname='+pname+'&'+'cname='+cname)
            return d
        }
        ajax().then(({data:res})=>{
            console.log(res.list[3]) //陵川县
        })
    </script>

希望对您能有所帮助。