解决回调地狱问题

普通的回调地狱案例

Document

<script>
    //  目标：调用接口，请求第6个省的第1个市下的地区列表
    axios.defaults.baseURL = '基地址'
    axios.get('/api/province').then(res=>{
        const pname = res.data.data[5]
        console.log(pname)
        axios.get('/api/city?pname='+pname).then(res =>{
            const cname = res.data.data[0]
            console.log(cname)
            axios.get(`/api/area?pname=${pname}&cname=${cname}`).then(res => {
                console.log(res.data.data)
            })
        })
    })

</script>

使用Promise优化回调地狱代码

<script>
axios.defaults.baseURL = '基地址'

let pname = ''
axios.get('/api/province').then(res => {
    // 获取某个省, 对应的城市列表
    pname = res.data.data[5];
    // console.log(pname)
    // return 新的promise
    return axios.get(`/api/city?pname=${pname}`)
}).then(res => {
    let cname = res.data.data[0]
    // console.log(cname)
    return axios.get(`/api/area?pname=${pname}&cname=${cname}`)
}).then(res => {
    return res.data.data
}).then(area => {
    console.log(area)
}).catch(err => {
    console.log('这里有错误', err)
})
// 上面的代码就出现了回调地狱
// 概念: 在回调函数内, 再嵌套回调函数, 一直嵌套下去形成了回调地狱
</script>

使用async和await解决回调地狱

    axios.defaults.baseURL = '基地址'

    async function fn(){
        const provinces = await axios.get('/api/province')
        const pname = provinces.data.data[5];
        
        const citys = await axios.get(`/api/city?pname=${pname}`)
        
        let cname = citys.data.data[0]
        const areas = await axios.get(`/api/area?pname=${pname}&cname=${cname}`)
        // console.log(areas.data.data)
        return areas.data.data
    }

    async function f(){
        const r = await fn()
        console.log(r);
    }
    f()
</script>