回调地狱,使用promise,async await优化回调地狱

最新推荐文章于 2024-07-20 23:54:17 发布

两米八八!

最新推荐文章于 2024-07-20 23:54:17 发布

阅读量77

点赞数 3

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/m0_72962890/article/details/127915169

版权

回调地狱:

 <script>
        // 特点：1. 发多次ajax请求  2. 后一次请求要依赖上一次请求的结果
        // 目标: 获取所有省市区数据, 随便获取
        // 1. 获取所有省份列表
        axios.get('http://ajax-api.itheima.net/api/province').then(res => {
            // 2. 获取某个省, 对应的城市列表
            let pname = res.data.data[5];
            axios.get(`http://ajax-api.itheima.net/api/city?pname=${pname}`).then(res => {
                // 3. 获取某个市, 对应的地区列表
                let cname = res.data.data[0]
                axios.get(`http://ajax-api.itheima.net/api/area?pname=${pname}&cname=${cname}`).then(res => {
                    console.log(res);
                })
            })
        })
    </script>

promise解决回调地狱:

<script>
        let pname = ''
        axios.get('http://ajax-api.itheima.net/api/province').then(res => {
            pname = res.data.data[5]
            return axios.get(`http://ajax-api.itheima.net/api/city?pname=${pname}`)
        }).then(res => {
            let cname = res.data.data[0]
            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>
        axios.defaults.baseURL = 'http://ajax-api.itheima.net'
        // 目标: 使用Promise的链式调用解决问题
        // 前提: axios函数在原地返回的就是一个Promise对象
        async function f() {
            const provinces = await axios.get('/api/province')
            const pname = provinces.data.data[5]
            const citys = await axios.get(`/api/city?pname=${pname}`)
            const cname = citys.data.data[0]
            const areas = await axios.get(`/api/area?pname=${pname}&cname=${cname}`)
            return areas.data.data
        }
        async function fn() {
            const p = await f()
            console.log(p);
        }
 </script>