含泪也要看–async和await的使用与原理

async/await旨在解决利用异步结果组织代码的问题，是ES8中新增的。

async

async关键字用于声明异步函数，可以用在函数声明、函数表达式、箭头函数和方法上

async关键字使得函数变为异步函数，异步函数也就意味着该函数的执行不会阻塞后面代码的执行。

使用该关键字可以让函数具有异步特征，但总体上其代码仍然是同步求值的。

而在参数和闭包方面，异步函数仍然具有js函数的正常行为，如下foo函数仍在会在后面的打印输出之前被输出：

    async function foo(){
        console.log('1')
    }
    foo()
    console.log('2')

若异步函数使用了return关键字返回了值（如果没有return 则会返回undefined），否则这个值会被promise.resolve()包装为promise对象，那么异步函数终将返回promise对象

如果想获得这个返回值，可以用then方法，否则会打印一个promise对象

    async function foo(){
        console.log('1')
        return 3
    }
    console.log(foo()) //打印1和promise对象
    foo().then(console.log) //打印1 3

或者让函数直接返回一个promise对象，结果也可以打印出来

     async function foo(){
        console.log('1')
        // return 3
        return Promise.resolve(3)
    }
    foo().then(console.log) //打印1 3

在异步函数中会抛出错误并返回被拒绝的promise，如果想获取到这个抛出的值，需要用catch方法捕获

    async function foo(){
        console.log(1)
        throw 3
    }
    foo().catch(console.log)

但是被拒绝的promise不会被异步函数捕获，resolve的可以，被拒绝的浏览器会报错

    async function foo(){
        console.log(1)
        Promise.reject(3)
    }
    foo().catch(console.log)

await

由于异步函数async主要针对不会马上完成的任务，所以自然需要一种暂停和恢复执行的能力，使用await可以暂停async声明的函数的代码的执行，等待promise解决，也就是等待promise执行后拿到resolve值，之后再向下执行

    let p = new Promise((resolve,reject)=>{
        setTimeout(resolve,1000,3)//这里的3就是传给resole的参数
    })
    p.then(console.log)

需要说明一下：以上代码的setTimeout(resolve,1000,3)等价于setTimeout(()=>resolve(3),1000)两种写法

补充：

setTimeout(code, milliseconds, param1, param2, ...)
setTimeout(function, milliseconds, param1, param2, ...)
code/function 必需。要调用一个代码串，也可以是一个函数。

milliseconds 可选。执行或调用 code/function 需要等待的时间，以毫秒计。默认为 0。

param1, param2, … 可选。传给执行函数的其他参数（IE9 及其更早版本不支持该参数）。

此时有了await之后我们就可将以上代码写为：

    async function foo(){
        let p = new Promise((resolve,reject)=>{
            setTimeout(resolve,1000,3)//这里的3就是传给resole的参数
        })
        console.log(p)
        console.log(await p)
    }
    foo()

注意，这里await会暂停执行异步函数后面的代码，并拿到resolve的值之后，再继续执行

那么再举几个await常见的用法，在表达式中使用

    async function foo1(){
        console.log(await Promise.resolve('foo'))
    }
    foo1()

    async function foo2(){
        return await Promise.resolve('bar')
    }
    foo2().then(console.log)

    async function foo3(){
        await new Promise((resolve,reject)=>setTimeout(resolve,1000))
        console.log('bars')
    }
    foo3()//一秒后打印出bars

await的限制：await关键字必须用在异步函数async中，不能用在同步函数表达式和声明中，以及箭头函数中也是不允许的

以上就是async和await的基本用法了，最后补充一下

    async function foo(){
        console.log(await Promise.resolve('foo'))
    }
    async function bar(){
        console.log(await 'bar')
    }
    async function baz(){
        console.log('baz')
    }
    foo()
    bar()
    baz()