ES6的async/await

上文写了下Promise, 有些时候我们一个流程里使用了太多的promise，会发现then也一大堆，仿佛又回到了之前的回调地狱，理解起来也没那么容易。

aync的用法很简单，以一个函数为例， async放到定义前面即可

async function a() {
    console.log(1)
}

async 执行后返回的是一个Promise对象

await的意思就是同步，而且await必须在async标记的函数里面才能使用，不然会报错

Promise函数前面加上await，说明等待，需要这个代码执行完毕，才能执行下面的

async function a() {
    console.log( await b())
    // return 1
}
function b() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(2)
        }, 1000)
    })
}
a()  // 2

这样使用async await就能很好的解决Promise，then过多的问题了。

同时，使用的话，比如调两个接口，有一个接口必须需要前一个接口的值，这里就可以使用async await

function ajax1() {
    return new Promise((resolve, reject) => {
        const data = ajax('接口1', {params}).then((res) => {

        }).data
        resolve(data)
    })
}

function ajax2(data) {
    return new Promise((resolve, reject) => {
        const data1 = ajax('接口1', {data}).then((res) => {

        }).data
        resolve(data1)
        // resolve(data)
    })
}
async function getData () {
    const data = await ajax1()
    await ajax2(data)
}

这样的话代码逻辑看起来也会比较清晰，阅读良好

只不过会有个小问题

如果某些接口返回数据比较慢的话，我们的页面可能加载速度会比较慢，毕竟await的时候，相当于同步，对js进程造成了阻塞，导致后面的代码无法运行。这个对性能还是会起到一定的负面作用。

这种问题的话，要么需要后端接口方对接口进行优化，要么自身解决（不做阐述，其实我也不会）