【ES8(2017)】async / await

asyncawait 是一种更加优雅的异步编程解决方案,是Promise 的拓展。

在我们处理异步的时候,比起回调函数,Promisethen方法会显得较为简洁和清晰,但是在处理多个彼此之间相互依赖的请求的时候,就会显的有些繁琐。这时候,用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。

你可能感兴趣的:(ES6快速入门专题,javascript,es6,html,node.js,async/await)