ES8(2017)async / await

Posted 2021-05-18 优小U

async 和 await 是一种更加优雅的异步编程解决方案，是Promise 的拓展。

在我们处理异步的时候，比起回调函数，Promise的then方法会显得较为简洁和清晰，但是在处理多个彼此之间相互依赖的请求的时候，就会显的有些繁琐。这时候，用async/await更加优雅。

我们知道 javascript 是单线程的，使用 Promise 之后可以让我们书写异步操作更加简单，而 async 是让我们写起 Promise 像同步操作。

基本用法

前面添加了async的函数在执行后都会自动返回一个Promise对象：

async function foo() {
    return 'hello'
}
console.log(foo()) // Promise 对象

await后面需要跟异步操作，不然就没有意义，而且await后面的Promise对象不必写then，因为await的作用之一就是获取后面Promise对象成功状态传递出来的参数。

function timeout() {
    return new Promise(resolve => {
        setTimeout(() => {
            console.log(1)
            resolve('success')
        }, 1000)
    })
}

async function foo() {
    let res = await timeout()
    console.log(res)
    console.log(2)
}
foo()
// 1  success 2

在async函数中使用await，那么await这里的代码就会变成同步的了，意思就是说只有等await后面的Promise执行完成得到结果才会继续下去，await就是等待。

应用

按顺序读取a.json、b.json、c.json，使用async/await该如何实现：

function request(url) {
    return new Promise(resolve => {
        ajax(url, res => {
            resolve(res)
        })
    })
}
async function getData() {
    let res1 = await request('static/a.json')
    console.log(res1)
    let res2 = await request('static/b.json')
    console.log(res2)
    let res3 = await request('static/c.json')
    console.log(res3)
}
getData()

await 只能在 async 标记的函数内部使用，单独使用会触发 Syntax error。