本文旨在解析JavaScript中`await`关键字的执行机制，尤其是在其作用于非异步函数或不返回Promise的场景时可能导致的意外行为。通过具体代码示例，我们将探讨`await`如何与`async`函数及Promise协同工作，并提供最佳实践，确保异步操作按照预期顺序执行，避免常见的执行序列问题。
在JavaScript的异步编程中，async/await语法极大地简化了Promise链的处理，使其看起来更像同步代码。然而，如果对await的底层机制理解不深，可能会遇到出乎意料的执行顺序问题。本教程将深入探讨一个常见的场景：当await用于调用一个本身不是async函数且不显式返回Promise的函数时，为何执行序列会与预期不符。
1. 问题现象与初步分析
考虑以下代码片段，其目标是按顺序打印 "1", "3", "2"：
console.log("1");
await reloadScenarios();
console.log("2");
const reloadScenarios = () => {
if (token) {
getScenario()
.then(({ scenarios }) => {
console.log("3");
const transformedScenarios = scenarios.map(option => ({
scenario: option.name,
description: option.categories.name,
value: option._id
}));
setOptions(transformedScenarios);
})
.catch((error) => {
console.error('Failed to fetch scenario options:', error);
});
}
};在上述代码中，getScenario()是一个返回Promise的异步操作。我们期望await reloadScenarios()能够暂停执行，直到getScenario()及其后续的.then()链完成，然后才打印 "2"。然而，实际的输出顺序却是 "1", "2", "3"。
立即学习“Java免费学习笔记（深入）”；
这个问题的核心在于对await关键字的误解。await的作用是暂停async函数的执行，直到它等待的Promise被解决（resolved）或拒绝（rejected）。如果await表达式的值不是一个Promise，那么它会被立即解析为该值，而不会发生暂停。
在原始的reloadScenarios函数中：
- 它没有被标记为async。
- 它没有显式地返回一个Promise。
因此，当外部的await reloadScenarios()被调用时，reloadScenarios函数同步执行。由于它没有返回Promise，await会立即解析其返回值（在这种情况下是undefined），然后继续执行console.log("2")。而getScenario().then(...)是一个异步操作，它会在事件循环的后续阶段执行，因此"3"的打印会晚于"2"。
2. 解决方案：标记函数为 async 并正确处理 Promise
要实现预期的执行顺序 "1", "3", "2"，我们需要确保reloadScenarios函数本身能够返回一个Promise，并且await能够等待这个Promise的解决。
最直接且推荐的方法是：
- 将reloadScenarios函数标记为async。
- 在async函数内部，使用await来等待getScenario()返回的Promise。
修改后的reloadScenarios函数如下：
const reloadScenarios = async () => { // 1. 标记为 async 函数
if (token) {
try {
const { scenarios } = await getScenario(); // 2. 在内部 await Promise
console.log("3");
const transformedScenarios = scenarios.map(option => ({
scenario: option.name,
description: option.categories.name,
value: option._id
}));
setOptions(transformedScenarios);
} catch (error) {
console.error('Failed to fetch scenario options:', error);
// 重要的：如果希望外部的 await 能够捕获这个错误，需要在此处抛出或返回 rejected Promise
throw error;
}
}
// 如果 token 为 false，async 函数会隐式返回一个已解决的 Promise (值为 undefined)
// 外部的 await 仍会等待其完成，但不会有内部的异步操作。
};现在，当await reloadScenarios()被调用时：
- 由于reloadScenarios是一个async函数，它会隐式地返回一个Promise。
- 外部的await会等待这个由reloadScenarios返回的Promise解决。
- 在reloadScenarios函数内部，await getScenario()会暂停reloadScenarios自身的执行，直到getScenario()返回的Promise解决。
- 一旦getScenario()解决，console.log("3")被执行。
- reloadScenarios函数完成，其返回的Promise被解决。
- 外部的await reloadScenarios()完成，继续执行console.log("2")。
这样，执行顺序就变成了我们期望的 "1", "3", "2"。
3. 注意事项与最佳实践
- async 函数总是返回 Promise：即使一个async函数看起来没有return语句，它也会隐式地返回一个Promise。如果函数正常完成，Promise会以undefined解决；如果返回一个值，Promise会以该值解决；如果抛出错误，Promise会以该错误拒绝。
- await 只能在 async 函数内部使用：await关键字只能在被async关键字标记的函数内部使用。
- 错误处理：在使用async/await时，推荐使用try...catch语句来捕获异步操作可能抛出的错误，这比.catch()链更像同步代码的错误处理方式。
- 返回 Promise 的重要性：如果一个函数内部执行了异步操作，并且你希望外部代码能够等待这些操作完成，那么这个函数必须返回一个Promise（无论是通过async函数隐式返回，还是显式地return new Promise(...)或return somePromise）。
总结
await关键字是JavaScript异步编程的强大工具，但其有效性依赖于其所等待的表达式是否是一个Promise。要确保await能够正确暂停执行并等待异步操作完成，关键在于：
- 将包含await调用的函数标记为async。
- 确保被await的函数（或表达式）返回一个Promise。在async函数内部，这通常意味着直接await另一个返回Promise的函数。
通过遵循这些原则，可以有效地管理异步代码的执行流程，避免常见的时序问题，并编写出更健壮、可读性更强的JavaScript代码。
参考资料：
