AJAX---回调地狱及两种优化方案

什么是回调地狱

 在回调函数内, 再嵌套回调函数, 一直嵌套下去形成了回调地狱。

回调地狱缺点

1：代码可复用性不强
2：可阅读性差
3：可维护性（迭代性差）
4：扩展性差
5：不够优雅

回调地狱 

<script src="https://cdn.jsdelivr.net/npm/axios@0.27.2/dist/axios.min.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);
            })
        })
    })
</script>

优化方案一：通过Promise进行优化（ES6）

<script>
    let pname
    let cname
    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 => {
        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(err);
    })
</script>

特点：通过then链式调用把Promise对象串联起来 结果仍是一个Promise对象。

 

缺点：这种方式充满了 Promise 的 then() 方法，如果处理流程比较复杂的话，那么整段代码将充斥着 then，语义化不明显，代码不能很好地表示执行流程。

 

优化方案二：通过async和await优化（ES7）

<script>
    axios.defaults.baseURL = 'http://ajax-api.itheima.net'
    async function fn() {
        const p = await axios.get('/api/province')
        const pname = p.data.data[5]
        const c = await axios.get(`/api/city?pname=${pname}`)
        const cname = c.data.data[0]
        const area = await axios.get(`/api/area?pname=${pname}&cname=${cname}`)
        return area.data.data
        // console.log(area.data.data);
    }

    async function f() {
        const t = await fn()
        console.log(t);
    }
    f()
</script>

特点：通过async和await 取代 then函数 来提取Promise的值。

优点：通过同步的方式写异步代码，提高了代码的可读性，可添加返回值，是异步编程的终极方案