JavaScript async/await使用详解

什么是async/await

async/await是ES2017中的语法，它使得异步的代码看起来更像同步的代码。async/await基于Promise，是Promise写法的一种简洁写法。

使用async/await

async/await需要使用async定义异步函数，使用await等待异步操作完成，代码会等到await操作完成后再继续执行。

定义异步函数

异步函数可以通过async关键字定义：

async function func() {
    // ...
}

异步函数返回值

异步函数是Promise对象的语法糖，它的返回值会被自动封装成Promise对象。

async function func() {
    return "hello world";
}
func().then(result => {
    console.log(result); // "hello world"
});

await等待异步操作完成

使用await等待异步操作完成，代码会暂停执行，直到异步操作完成后再继续执行。

async function func() {
    let result = await aysncOperation();
    console.log(result);
}

使用try...catch捕获异常

异步函数中的异常可以使用try...catch捕获。

async function func() {
    try {
        let result = await aysncOperation();
        console.log(result);
    } catch (error) {
        console.log(error);
    }
}

示例

示例一

在Node.js中使用async/await读取文件内容。

const fs = require('fs');
const util = require('util');

const readFileAsync = util.promisify(fs.readFile);

async function getFileContent(filePath) {
    try {
        let content = await readFileAsync(filePath);
        console.log(content.toString());
    } catch (error) {
        console.log(error);
    }
}

getFileContent('file.txt');

示例二

使用async/await实现一个异步操作队列。

class AsyncQueue {
    constructor() {
        this.queue = [];
    }

    async enqueue(asyncOperation) {
        this.queue.push(asyncOperation);
        if (this.queue.length === 1) {
            await this.queue[0]();
        }
    }

    dequeue() {
        this.queue.shift();
        if (this.queue.length > 0) {
            this.queue[0]();
        }
    }
}

async function asyncOperation(index) {
    console.log(`operation ${index} start`);
    await new Promise(resolve => setTimeout(resolve, 1000));
    console.log(`operation ${index} end`);
}

async function testAsyncQueue() {
    const queue = new AsyncQueue();
    for(let i = 0; i < 10; i++) {
        await queue.enqueue(() => asyncOperation(i));
    }
}

testAsyncQueue();