async...await

1. async

async(异步),顾名思义，是异步程的一种解决方案，与Promise有很大关联。

语法

async function 函数名(参数) {
  // ...
}

返回值

async函数返回一个Promise对象。可以使用then方法添加回调函数。

async function testAsync() {
    return 'hello'
}
console.log(testAsync()) // Promise&nbsp;{<resolved>: "hello"}

testAsync().then(res => {
    console.log(res) // hello
})

2. await

await用于等待一个Promise对象，只能在async函数内部使用。

语法

返回值 = await 表达式;

返回值

返回值跟await后的表达式相关。
表达式为Promise对象：await会暂停执行，等待Promise对象resolve，然后返回解析值并回复async函数的执行。
非Promise对象：直接返回对应的值。

function testAwait() {
    return Promise.resolve(1);
}
async function testAsync() {
    console.log(await testAwait()); // 1
    console.log(await 2); // 2
    console.log('async'); // async
}
testAsync();

3. 一个异步的例子

setTimeout(() => {
    console.log('1')
})
console.log('2')

由于，setTimeout是异步的，结果会先打印出2,再打印出1。如果我们想要先打印1，然后再打印2。有下面几种方案。

// 使用回调函数
function doSomething(callback) {
    setTimeout(() => {
        console.log('1');
        callback();
    })
}
doSomething(() => {
    console.log('2');
})

// 使用Promise
function doAsync() {
    return new Promise(resolve => {
        setTimeout(() => {
            console.log('1')
            resolve();
        })
    })
}
doAsync().then(() => {
    console.log('2')
})

// 使用async...await
function doAsync() {
    return new Promise(resolve => {
        setTimeout(() => {
            console.log('1')
            resolve();
        })
    })
}
async function doSomething() {
    await doAsync();
    console.log('2')
}
doSomething();

参考资料：https://www.runoob.com/w3cnote/es6-async.html