异步编程中的 async/await 应用原理

在前端开发中，异步操作是常见的需求。特别是在处理数据请求、文件读写等场景时，如何优雅地管理和控制这些异步任务显得尤为重要。本文将深入探讨 async/await 的应用原理及其与 Promise 和 Generator 的关系。

异步操作的顺序执行

通过使用 for 循环和 async/await 结合可以实现按顺序执行异步操作，代码如下：

function syncTime(delay, res) {
    return new Promise((resolve, reject)=> {
        setTimeout(()=> {
            resolve(res);
        }, delay)
    })
}

async function main() {
    for(let i=0 ;i<10; i++){
        let res = await syncTime(1000, i)
        console.log(`%c ${res}`, `color: red;`);
    }
}
main();

运行结果：会依次打印从 0 到 9，每停顿一秒执行一次。如果将 syncTime 函数中的 setTimeout 替换为实际的异步请求，则可以直接应用在项目中。

async/await 实现原理

我们以上面的代码为例来分析 for + await 执行时的具体过程：

1. 每次循环都会调用 syncTime 函数，返回一个 Promise 对象。
2. 当延迟时间为 1000ms 后，Promise 状态由“pending”变为“resolved”，此时异步操作完成并继续执行后续代码。

这里的关键点在于：虽然直接打印 console.log 的逻辑在前，但由于 syncTime 返回的 Promise 是异步的，JavaScript 引擎会按照 Event Loop 机制来处理这些异步任务，并不会阻塞主线程，因此能够按顺序输出结果。

async/await 和生成器

理解 async/await 需要先了解 Generator 函数。Generator 允许函数挂起和恢复执行：

function* generatorDemo() {
    console.log('start');
    yield 1;
    console.log('middle');
    yield 2;
    console.log('end');
}

const gen = generatorDemo();
gen.next(); // start, { value: 1, done: false }
gen.next(); // middle, { value: 2, done: false }
gen.next(); // end, { value: undefined, done: true }

yield关键字会在执行到时暂停函数，并等待外部通过 next() 方法恢复执行。

自动执行器

为了驱动生成器的自动执行，我们需要一个自动执行器：

function runGenerator(gen) {
    const generator = gen();
    function step(nextValue) {
        const result = generator.next(nextValue);
        if (result.done) return result.value;
        result.value.then(val => step(val));
    }
    step();
}

这个 runGenerator 函数做的事情包括：

1. 创建生成器实例。
2. 调用 next() 获取结果。
3. 如果 done 为 true，则结束执行；否则继续调用 .then() 处理 Promise 并递归执行。

async/await 的语法糖

async/await 实际上是对上述机制的简化：

// Generator 版本
function* fetchData() {
    const data1 = yield fetch('/api/user');
    const data2 = yield fetch('/api/posts');
    return data2;
}

// async/await 版本
async function fetchData() {
    const data1 = await fetch('/api/user');
    const data2 = await fetch('/api/posts');
    return data2;
}

async 关键字使得函数返回一个 Promise，而 await 则替代了 yield，自动处理 Promise 的 resolve 和 reject。

编译后的真相

通过 Babel 等工具可以查看编译后的真实代码：

// 原始代码
async function main() {
    const res = await syncTime(1000, 1);
    console.log(res);
}

// 编译后（简化版）
function main() {
    return _asyncToGenerator(function* () {
        const res = yield syncTime(1000, 1);
        console.log(res);
    })();
}

编译后的代码中，_asyncToGenerator 负责驱动 Generator 执行，并处理每个 Promise 的结果。

状态切换

每次遇到 await 关键字时，异步函数会暂停执行状态并等待 Promise 完成。这种机制使得 JavaScript 引擎可以在等待期间继续执行其他任务：

等待中 → Promise resolve → 继续执行 → 等待中 → ...

继发与并发

回到文章开头的 for + await 示例，为什么是顺序执行？

async function main() {
    for(let i=0 ;i<10; i++){
        let res = await syncTime(1000, i)
        console.log(res);
    }
}

在每次循环中，await 会暂停函数执行直到 syncTime 返回的 Promise 被 resolve。因此，每个同步操作完成后才会继续下一个异步操作，实现顺序执行。

通过以上分析，我们可以更好地理解 async/await 的工作机制及其与生成器的关系，并能够更高效地处理前端开发中的异步编程需求。

并发与继发

在异步编程中，可以通过调整代码逻辑来控制任务的执行顺序。通过 await 关键字让每次循环都暂停直到当前 Promise 的结果返回，这种模式被称为继发（串行），意味着每个操作必须等待前一个操作完成才能开始。

如果想要多个操作同时进行，可以使用 Promise.all() 方法，将所有异步任务封装到数组中一次启动。这种方式称为并发（并行）执行，能够显著提高程序的效率和性能。

Async 函数返回值

async 函数本质上总是返回一个 Promise 对象。无论该函数内部是通过 return 语句直接返回数据还是抛出异常，最终都会形成一个带有相应状态的 Promise。这种设计使得异步操作可以非常方便地使用同步的方式来编写代码。

例如：

async function demo() {
    return 'Hello World!';
}
console.log(demo().then(res => res)); // 输出 "Promise { 
<pending> }" 并最终变为 "Promise { 'Hello World!' }"

错误处理机制

在使用 async/await 处理异步操作时，可以借助 JavaScript 的 try...catch 语法来捕获和处理可能出现的错误。这种方式不仅直观而且易于理解，代码阅读体验如同同步编程一般流畅。

例如：

async function main() {
    try {
        const response = await fetch('/api/data'); // 假设这是一个异步获取数据的操作
        console.log(response); // 输出成功响应信息
    } catch (error) {
        console.error('Error fetching data:', error.message);
    }
}
main();

防止踩坑技巧

平行 await 与继发 await 的区别

平行 await 是指利用 Promise.all() 方法同时启动多个异步操作，并等待所有结果返回。而 继发 await 则是按顺序执行每个 await 语句，确保前面的异步任务完成后才会开始下一个。

示例代码：

// 继发 await 示例：总耗时3秒
async function sequentialCalls() {
    const task1 = await someAsyncCall(); // 等待1秒完成
    const task2 = await anotherAsyncCall(task1); // 再等待1秒完成
}

// 并行 await 示例：总耗时1秒
async function parallelCalls() {
    [result1, result2] = await Promise.all([someAsyncCall(), anotherAsyncCall()]);
}

避免在 forEach 中使用 await

避免直接在 forEach 方法中使用 await，因为这会导致循环中的异步任务无法按预期顺序执行。正确的做法是改用具有同步行为的 for...of 循环或手动处理 Promise。

示例代码：

// 错误示范：不会等待 async 函数完成
[1, 2, 3].forEach(async (item) => {
    await performAsyncOperation(item);
});

// 正确示范：使用 for-of 来确保顺序执行
for(const item of [1, 2, 3]) {
    await performAsyncOperation(item);
}

通过遵循这些指导原则，开发者可以更高效地利用 async/await 进行异步编程，同时避免常见的陷阱和问题。

> 🔗 相关阅读：从静态页面到动态交互：DOM操作的核心API解析