async/await用法详解

ES2017 标准引入了 async 函数，使得异步操作变得更加方便。

async函数的定义方式

// 函数声明
async function fn() {}

// 函数表达式
const fn = async function () {}

// 箭头函数
const fn = async () => {}

// 对象的方法
let obj = { async fn() {} }
obj.fn().then(...)

核心用法

• await命令只能用在async函数之中，如果用在普通函数中会报错。

• async函数体内，await命令之前的代码以及await命令所在语句中await后的代码都为正常的同步代码，在async函数调用时正常执行。

• async函数会返回一个Promise对象。若返回的不是一个显式的Promise对象，则会使用Promise.resolve()包装成Promise对象。

• await命令后跟一条返回Promise对象的语句。若语句返回的不是Promise对象，则会使用Promise.resolve()包装成Promise对象。

• await命令相当于其后语句返回的Promise对象调用的只有一个回调函数的then方法。async函数体内await命令所在语句后的语句相当于then方法第一个回调函数中的语句，await关键字左侧返回的值相当于要传入then方法第一个回调函数的参数。

• await后语句返回的Promise对象的执行结果可能是rejected，所以最好把await命令放在try...catch代码块中。

示例代码：

async function fn() {
    return 100 // 相当于 return Promise.resolve(100)
}
console.log(fn()) // Promise {<fulfilled>: 100}

(async function () {
    const a = await new Promise((resolve, reject) => {
        console.log('start')
        resolve('hello')
        console.log('middle')
    }).then((val) => {
        console.log(val)
        return 'world'
    })
    console.log(a)
})()
console.log('end')

// start
// middle
// end
// hello
// world

错误处理

因为async函数体内await命令所在语句后的语句相当于then方法第一个回调函数中的语句，所以如果任何一个await语句后面的 Promise 对象变为reject状态，那么整个async函数都会中断执行。

(async function () {
    await Promise.reject('出错了')
    await Promise.resolve('hello world'); // 不会执行
})()
console.log('hello') // 仍然可以执行

常见错误方式

1. await后的Promise变为reject状态

await命令后面的 Promise 对象如果变为rejected状态，则reject的参数会被catch方法的回调函数接收到。

(async function () {
    await Promise.reject('出错了')
    console.log('hello'); // 不会执行
})()
    .catch(e => console.log('err~', e))
// err~ 出错了

注意，上面代码中，await语句前面没有return，但是reject方法的参数依然传入了catch方法的回调函数。这里如果在await前面加上return，效果是一样的。

2. await后的异步操作出错

若Promise内部直接抛出错误（如以下的throw new Error('出错了')），则Promise状态会变为rejected，reject的参数即为抛出的错误对象（如以下的Error('出错了')）

(async function () {
    await new Promise(() => {
        throw new Error('出错了')
        console.log('hello') // 不会执行
    })
})()
    .catch(e => console.log('err~', e))
// err~ Error: 出错了

3. async函数内部抛出错误

async函数内部直接抛出错误，会导致async函数返回的 Promise 对象变为rejected状态。抛出的错误对象会被catch方法回调函数接收到。

(async function () {
    throw new Error('出错了');
    console.log('hello'); // 不会执行
})()
    .catch(e => console.log('err~', e))
// err~ Error: 出错了

// 类似于如下
new Promise(() => {
    throw new Error('出错了')
    console.log('hello'); // 不会执行
})
    .catch(e => console.log('err~', e))

错误处理方式

如果希望即使一个异步操作失败，也不要中断后面的异步操作，可以将可能出错的await放在try...catch结构里面，这样不管这个异步操作是否成功，后面的await都会执行。

async function f() {
    try {
        await Promise.reject('出错了')
    } catch (e) {}
    return await Promise.resolve('hello world')
}

f().then(v => console.log(v))
// hello world

如果await后跟的是Promise对象，则也可以后面的 Promise 对象再跟一个catch方法，处理前面可能出现的错误。

async function f() {
    await Promise.reject('出错了')
        .catch(e => console.log(e));
    return await Promise.resolve('hello world');
}

f().then(v => console.log(v))
// 出错了
// hello world

如果有多个await命令，可以统一放在try...catch结构中。

async function main() {
    try {
        const val1 = await firstStep();
        const val2 = await secondStep(val1);
        const val3 = await thirdStep(val1, val2);

        console.log('Final: ', val3);
    } catch (err) {
        console.error(err);
    }
}

Promise对象的状态变化

async函数返回的 Promise 对象，必须等到async函数内部所有await命令后面的 Promise 对象执行完，才会发生状态改变，除非遇到return语句或者抛出错误。也就是说，只有async函数内部的异步操作执行完，才会执行then方法指定的回调函数。

示例代码：

function getSquare(num) {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve(num ** 2)
        }, 1000)
    })
}
async function fn(num) {
    const val1 = await getSquare(num)
    const val2 = await getSquare(val1)
    return val2
}
fn(3).then(console.log)
// 延迟两秒后，打印81

上面代码中，函数fn内部有两个操作：将输入平方、将得到的结果再次平方。只有这两个操作全部完成，才会执行then方法里面的console.log。

继发与并发

多个await命令后面的异步操作，如果不存在继发关系，最好让它们同时触发。

let foo = await getFoo();
let bar = await getBar();

上面代码中，getFoo和getBar是两个独立的异步操作（即互不依赖），被写成继发关系。这样比较耗时，因为只有getFoo完成以后，才会执行getBar，完全可以让它们同时触发。

如下写法，getFoo和getBar是同时触发，这样就会缩短程序的执行时间。

let [foo, bar] = await Promise.all([getFoo(), getBar()]);

示例代码：

// 定义求平方函数
function getSquare(num) {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve(num ** 2)
        }, 1000)
    })
}

// 继发处理
!(async function () {
    const arr = [1, 2, 3]
    const res = []
    for (const num of arr) {
        res.push(await getSquare(num))
    }

    console.log(res)
})()
// 延时3秒后，打印[1, 4, 9]

// 并发处理
!(async function () {
    const arr = [1, 2, 3]
    const promiseArr = arr.map(x => getSquare(x))
    let res = await Promise.all(promiseArr)

    console.log(res)
})()
// 延时1秒后，打印[1, 4, 9]

遍历

数组的forEach()、map()等方法都不支持按顺序等待异步处理（即不支持上述继发处理），for、for...in、for...of 都会按顺序等待异步。

示例代码：

function getSquare(num) {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve(num ** 2)
        }, 1000)
    })
}

!(function () {
    const arr = [1, 2, 3]
    arr.forEach(async num => {
        console.log(await getSquare(num));
    })
})()
// 延时1秒后，同时打印1 4 9

!(async function () {
    const arr = [1, 2, 3]
    for (const num of arr) {
        console.log(await getSquare(num));
    }
})()
// 延时1秒打印1，再延时1秒打印4，再延时1秒打印9

注意事项

• await命令只能用在async函数之中，如果用在普通函数中会报错。

• async函数体内，await命令之前的代码以及await命令所在语句中await后的代码都为正常的同步代码，在async函数调用时正常执行。

• await命令后的Promise对象的运行结果可能是rejected，所以最好把await命令放在try...catch代码块中。