Ajax回调地狱及优化版本

本文介绍了回调地狱的概念及其问题,并展示了如何使用Promise和async/await来优化异步代码,提高其可读性和可维护性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.什么叫回调地狱?

首先要理解回调地狱的概念:

地狱嘛 顾名思义,有很多层,就是在回调函数内, 再嵌套回调函数, 一直嵌套下去形成了回调地狱.

示例

调用接口,请求第6个省的第1个市下的地区列表

这是一段普通的回调地狱:

 axios.defaults.baseURL='http://ajax-api.itheima.net'
        //  回调地狱 一层嵌套一层
        axios.get('/api/province').then(res => {
            const provinces=res.data.data[16]
            // console.log(provinces);
            axios.get('api/city?pname='+provinces).then(res => {
                const citys=res.data.data[4]
                // console.log(citys);
                axios.get(`api/area?pname=${provinces}&cname=${citys}`).then(res => {
                    console.log(res.data.data);
                })
            })
        })

这种回调地狱的缺点:

1:代码可复用性不强
2:可阅读性差
3:可维护性(迭代性差)
4:扩展性差

2.用promise优化回调地狱

// promise 优化回调地狱
        // 发多个请求 后一个请求要依赖上一个的返回值 
        // 返回值为一个promise对象提供给下一个请求 去触发then的执行 不会出现一个套一个的情况
        let provinces;
        axios.get('/api/province').then(res => {
            provinces=res.data.data[16]
            return axios.get('api/city?pname='+provinces)
        }).then(res => {
            const citys=res.data.data[4]
            return  axios.get(`api/area?pname=${provinces}&cname=${citys}`)
        }).then(res => {
            console.log(res.data.data);
        })

用promise去解决回调地狱就可以避免一层嵌套一层的情况出现,它可以根据.then的链式调用把Promise对象串联起来.

3.用async和await 优化回调地狱

// async和await 优化回调地狱
        // 用async和await 去替换掉then 可以直接提取到promise的值
        async function fn(){
            const provinces=await axios.get('/api/province')
            const pname=provinces.data.data[16]
            const citys=await axios.get('api/city?pname='+pname)
            const cname=citys.data.data[4]
            const areas=await axios.get(`api/area?pname=${pname}&cname=${cname}`)
            // console.log(areas.data.data);
            // 返回值是一个promise对象
            return areas.data.data
        }
        // 不在里面log打印的话 在外面也需要重新用async和await 提取promise对象的值去打印
        async function t(){
            const f=await fn()
            console.log(f);
        }
        t()

使用async-await搭配promise,可以通过编写形似同步的代码来处理异步流程,提高代码简洁和可读性.

优点:

1.解决了回调地狱一层套一层的问题

2.可以添加return返回值 return xxx

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值