细谈回调地狱终极解决方案及ES7新语法async和await

Posted 2021-06-19 我是真的不会前端

1.回调地狱的一般解决方案

正常情况下，我们都知道用promise去解决回调地狱。通过其调用then 和catch方法来实现回调函数多层嵌套问题。但是，我们可以实际来仔细看看用promise解决回调地狱的方法和问题所在。

//假设我们有两个数据库。 area.php传递一个城市的区域。city.php传递城市名。
//我们现在要通过ajax传递参数
promiseAjax({
    url:"area.php",
    data:{
        name:"南山区"
    }
}).then(res=>{
    // console.log(res);
    var {pid} = res;
    // 根据这个pid找到对应的市 - 市的pid - 省的id
    return promiseAjax({
        url:"city.php",
        data:{
            id:pid
        }
    })
}).then(res=>{
    // console.log(res);
    var {pid} = res;
    // 根据这个id查询到省份
    return promiseAjax({
        url:"province.php",
        data:{
            id:pid
        }
    })
}).then(res=>{
    console.log(res);
})

仔细看这段代码。这个时候不难发现。其实es6提供的promise解决回调地狱的时候，将嵌套结构做成了链式结构，所有代码都是一个完整的整体。从某个意义上来说。这种解决回调地狱的方法。不够完美

ES7新语法：回调地狱的终极解决方案

首先：他可以将异步代码写的和同步代码一样。
async和await是关键字，async异步的，await等待 - 等待异步执行
/可以等待异步代码执行结束后继续往后执行 - 将异步代码变的跟同步代码一样啦
async修饰函数的 我们可以直接写在函数体前面例如

async function fn（）{}；

async function fn(){
    // await必须在async修饰的函数内部使用
    // await用来修饰一个promise对象
    var res = await promiseAjax({ // await可以等待promise中异步操作有了结果
        url:"area.php",
        data:{
            name:"宝安区"
        }
    })

    // console.log(res);
    var {pid} = res;
    var city = await promiseAjax({
        url:"city.php",
        data:{
            id:pid
        }
    })

    console.log(city);
    var {pid} = city;

    var province = await promiseAjax({
        url:"province.php",
        data:{
            id:pid
        }
    })

    console.log(province);
}
fn()

await是在等待promise的引用结果。这个结果还可以在外面接收回来。这样，我们可以不用再去promise写then。因为之前我们因为结果我要操作结果，现在await是等结果。本来的同步代码应该在异步结果之前执行。然而这里因为await在等待结果。所以等同于同时行进。
那这样写好处什么呢：我们可以把同步当异步写。使得代码更易于维护。