为什么使用async/await时会报“expressions are only allowed within async functions”错误？

Question

为什么在使用 async/await 时会遇到“expressions are only allowed within async functions”错误？这是许多开发者常见的困惑。此问题通常源于对 async/await 机制的理解不足。你是否尝试在一个非 async 函数中直接使用 await？或者，是否在某些特殊语法结构（如箭头函数或回调函数）中错误地应用了 await？如何正确调整代码结构以避免该错误？请确保函数声明为 async，并合理处理嵌套逻辑。

Answer 1

1. 问题概述：async/await 错误的根源

在使用 JavaScript 的 async/await 语法时，开发者经常遇到错误提示“expressions are only allowed within async functions”。这个错误的核心原因在于，await 关键字只能在被标记为 async 的函数内部使用。如果尝试在非 async 函数中直接使用 await，就会触发该错误。

例如，以下代码会导致错误：

function normalFunction() {
    const result = await someAsyncOperation(); // Error: 'await' expressions are only allowed within async functions
    return result;
}
    

从技术角度来看，await 是一种特殊的表达式，用于暂停异步函数的执行，直到某个 Promise 被解析或拒绝。这种机制要求函数必须声明为 async，以便 JavaScript 引擎能够正确处理其内部的异步逻辑。

2. 常见问题分析：特殊语法结构中的 await 使用误区

除了直接在非 async 函数中使用 await 外，还有一些更隐蔽的场景也可能导致此错误。例如，在箭头函数、回调函数或嵌套函数中错误地应用 await。

• 箭头函数： 如果在一个普通函数内定义了一个未标记为 async 的箭头函数，并试图在其中使用 await，也会引发错误。
• 回调函数： 在某些库（如 Node.js 的文件系统模块）中，回调函数通常是非 async 的，因此不能直接在其中使用 await。

示例代码：

const fs = require('fs');

fs.readFile('file.txt', (err, data) => {
    if (err) throw err;
    const content = await processContent(data); // Error: 'await' expressions are only allowed within async functions
});
    

上述代码中，processContent 是一个异步函数，但由于回调函数本身不是 async 的，因此无法直接使用 await。

3. 解决方案：如何正确调整代码结构

为了避免“expressions are only allowed within async functions”错误，开发者需要确保以下几点：

1. 将所有需要使用 await 的函数声明为 async。
2. 在箭头函数或回调函数中需要使用 await 时，将其包装在一个单独的 async 函数中。
3. 合理处理嵌套逻辑，避免不必要的复杂性。

以下是修正后的代码示例：

// 示例 1：将函数声明为 async
async function asyncFunction() {
    const result = await someAsyncOperation();
    return result;
}

// 示例 2：在回调函数中使用 async/await
fs.readFile('file.txt', async (err, data) => {
    if (err) throw err;
    const content = await processContent(data);
});

// 示例 3：将复杂逻辑拆分为多个 async 函数
async function handleFile() {
    const data = await readFileAsync('file.txt');
    const content = await processContent(data);
    return content;
}
    

4. 流程图：async/await 的执行流程

为了更直观地理解 async/await 的工作机制，可以通过以下流程图展示其执行过程：

sequenceDiagram
            participant Caller as 调用方
            participant AsyncFunction as 异步函数
            participant Promise as Promise 对象

            Caller->>AsyncFunction: 调用异步函数
            AsyncFunction->>Promise: 创建并返回 Promise
            loop 异步操作
                AsyncFunction->>AsyncFunction: 遇到 await 暂停执行
                AsyncFunction->>Promise: 等待 Promise 完成
            end
            Promise-->>Caller: 返回结果或错误