Ajax回调地狱及优化版本

最新推荐文章于 2025-05-28 23:08:58 发布

原创最新推荐文章于 2025-05-28 23:08:58 发布 · 523 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #前端 #javascript

本文介绍了回调地狱的概念及其问题，并展示了如何使用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