Ajax解决回调地狱的方法

最新推荐文章于 2024-05-01 20:48:21 发布

是馒头妹妹呀

最新推荐文章于 2024-05-01 20:48:21 发布

阅读量358

点赞数

文章标签： ajax javascript 前端

本文链接：https://blog.csdn.net/m0_62877814/article/details/127874040

版权

普通案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="./axios.js"></script>

    <script>
        //  目标：调用接口，请求第6个省的第1个市下的地区列表
        axios.defaults.baseURL = 'http://ajax-api.itheima.net'
        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>
</body>
</html>

使用Promise解决

<script>

let pname = ''
axios.get('http://ajax-api.itheima.net/api/province').then(res => {
    // 获取某个省, 对应的城市列表
    pname = res.data.data[5];
    // console.log(pname)
    // return 新的promise
    return axios.get(`http://ajax-api.itheima.net/api/city?pname=${pname}`)
}).then(res => {
    let cname = res.data.data[0]
    // console.log(cname)
    return axios.get(`http://ajax-api.itheima.net/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解决

<script src="https://cdn.jsdelivr.net/npm/axios@0.27.2/dist/axios.min.js"></script>

<script>
    // 目标: 使用Promise的链式调用解决问题
// 前提: axios函数在原地返回的就是一个Promise对象
// let pname = ''
// axios.defaults.baseURL = 'http://ajax-api.itheima.net'
// axios.get('/api/province').then(res => {
//     // 2. 获取某个省, 对应的城市列表
//     pname = res.data.data[5];
//     return axios.get(`/api/city?pname=${pname}`)
// }).then(res => {
//     // 3. 获取某个市, 对应的地区列表
//     let cname = res.data.data[0]
//     return axios.get(`/api/area?pname=${pname}&cname=${cname}`)
// }).then(res => {
//     console.log(res);
// })
</script>

<script>
    axios.defaults.baseURL = 'http://ajax-api.itheima.net'

    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>