浅谈async/await

async和await是es6新增的js特性。字面意思来理解，async是异步的意思，await是等待的意思，等待异步代码执行完成。它们可以让我们更简单高效的处理异步操作。下面一起来探究async和await吧

async

async是加在函数前面的，用来定义这个函数是异步函数

特性1：自动将常规函数转换成Promise，返回值也是一个Promise对象

async function show() {
    console.log('干一些事。。。')
    return '测试'
}
// console.log(show());
// 干一些事。。。
// Promise {<fulfilled>: "测试"}
/* 
    你会发现async标志的函数返回值是一个promise对象，那么我们只要.then就能拿到
*/
show().then(res=>{
    console.log(res) // 测试
})

特性2：不会阻塞后面代码的执行

async function fn() {
    return '嘿嘿嘿'
}
fn().then(res=>{
    console.log(res)
})
console.log('虽然在后面，但是我先执行')

 可以看到async把函数变成了异步函数，异步函数不影响同步代码的执行

特性3：如果async 函数中有返回一个值 ,当调用该函数时，内部会调用Promise.solve() 方法把它转化成一个promise 对象作为返回。如果函数内部抛出错误呢？ 那么就会调用Promise.reject() 返回一个promise 对象

async function fn(flag) {
    if(flag) {
        return '你好啊'
    }else {
        throw '报错了'
    }
}
console.log(fn(true))    // Promise {<fulfilled>: "你好啊"}
console.log(fn(false))   // Promise {<rejected>: "报错了"}

await

await是等待的意思，它后面可以放任何表达式，不过我们更多的是放一个返回promise 对象的表达式

特性1：await 关键字只能放到async 函数里面

function fn() {
    await '嘿嘿嘿'
}
// 报错：Uncaught SyntaxError: await is only valid in async functions and the top level bodies of modules

特性2：await 放置在Promise调用之前，await 强制后面点代码等待，直到Promise对象resolve，得到resolve的值作为await表达式的运算结果

async function fn() {
    const res1 = await new Promise((resolve,reject)=>{
        setTimeout(function() {
            resolve('哈哈哈')
        },2000)
    })
    const res2 = await new Promise((resolve,reject)=>{
        setTimeout(function() {
            resolve('啦啦啦')
        },3000)
    })
    console.log(res1)   // 哈哈哈
    console.log(res2)   // 啦啦啦
}
fn()

await的用法则相对简单了许多，他后面需要是一个Promise对象，如果不是则会被转成Promise对象。

            只要其中一个如果Promise对象变为reject状态，那么整个async函数都会中断操作。如果状态是resolve，那么他的返回值则会变成then里面的参数