什么是回调地狱？

最新推荐文章于 2024-06-16 16:38:32 发布

麦兜的明天

最新推荐文章于 2024-06-16 16:38:32 发布

阅读量2.1k

点赞数 1

文章标签： javascript ajax 前端

本文链接：https://blog.csdn.net/ll123456789_/article/details/127915228

版权

在回调函数里面嵌套回调函数，这样的就叫回调地狱，例如ajax发多个请求的时候，下一次请求要用要上一次请求的结果，这种嵌套的回调函数就是回调地狱。

什么叫回调函数呢？就是在调用函数时，把函数体作为实参传入到另一个函数内，它就是一个回调函数了。例如异步任务都有回调函数的应用。

promise优化回调地狱 & async await 优化回调地狱

promise优化回调地狱原理就是axios.get() 它相当于let p=axios.get() 也是一个promise对象，promise对象都有.then方法。

async await优化回调地狱的原理是async修饰后的函数它的返回值就是await axios.get（）所以这里可以省略.then 用一个变量直接接收await axios.get（）的返回值。再在函数外面接收这个函数的返回值。

<!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>
        // 普通回调地狱
        // 目标: 获取所有省市区数据, 随便获取
        // 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);
        //         })
        //     })
        // })

        // 上面的代码就出现了回调地狱
        // 概念: 在回调函数内, 再嵌套回调函数, 一直嵌套下去形成了回调地狱

        // Promise优化写法  处理错误也比较方便
        // axios.get() 它相当于let p=axios.get()  也是一个promise对象
        // let pname=''
        //      axios.get('http://ajax-api.itheima.net/api/province').then(res => {
        //    2. 获取某个省, 对应的城市列表
        //      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=>{
        //      console.log(res.data.data);
        //  }).catch(err=>{
        //      console.log('这里有错误');
        //  })


        // async  await优化回调地狱
        axios.defaults.baseURL = 'http://ajax-api.itheima.net'
        async function fn() {
            const province = await axios.get('/api/province')
            const pname = province.data.data[5]
            const city = await axios.get(`/api/city?pname=${pname}`)

            const cname = city.data.data[0]
            console.log(cname);
            const areas = await axios.get(`/api/area?pname=${pname}&cname=${cname}`)
            // console.log(areas.data.data);
            return areas.data.data
        }

        // 下面两种方法拿到封装函数的返回值
        // 第一种
        fn().then(res => {
            console.log(res);
        })

    // 第二种
//   async function f(){
//         const p =await fn()
//         console.log(p);
//     }
//     f()
    </script>
</body>

</html>