当开发者使用了异步函数（通常指async/await语法）后，发现代码并没有像预想中那样严格地“从上到下”按序执行，其根本原因在于对“异步函数”工作机制的一个核心误解：即错误地，将异步函数中await关键字的“暂停”，等同于了传统同步代码的“阻塞”。一个异步函数，其内在的运行逻辑涵盖了五个关键点：await关键字只能暂停其所在的异步函数、它并未阻塞整个程序的执行、被await的函数本身没有返回一个“承诺”对象、在循环中错误地并行触发了多个异步操作、以及对Promise.all等并行处理工具的误用。
具体来说，当解释器在一个异步函数中，遇到await指令时，它仅仅是“暂停”了当前这个异步函数的执行，然后，便立即将控制权“交还”给了主线程，去执行程序中的其他代码。它并不会像一个真正的“阻塞”操作那样，让整个程序都停下来，静静地等待。只有当await后面所跟随的那个异步操作，在未来的某个时刻，真正完成后，解释器，才会将这个被“暂停”的函数，重新放回执行队列，继续其后续的逻辑。
一、核心误区、将“暂停”等同于“阻塞”
要彻底地理解为何异步函数的执行顺序，会与我们的直觉产生偏差，我们必须首先，在概念上，清晰地区分两个核心的行为：“阻塞”与“暂停”。
1. 什么是真正的“阻塞”？
在同步编程模型中，“阻塞”是指，当程序，遇到一个耗时的操作时（例如，一个复杂的、需要大量计算的循环，或一次同步的网络请求），整个程序的执行线程，都会被**完全地、毫无保留地“卡”**在这个操作上。在它完成之前，后续的任何代码，都无法被执行。如果这个过程，发生在网页前端，那么，整个浏览器界面，都将“冻结”，无法响应用户的任何点击或滚动操作。
2. 异步函数的“非阻塞”本质
与之相对，现代JavaScript中的异步函数，其整个设计的“初心”，就是为了避免这种“阻塞”所带来的灾难性用户体验。 异步函数，是建立在“承诺”这一更底层的异步处理机制之上的、一种更优雅的“语法糖”。当JavaScript的解释器，在一个异步函数中，遇到了一个await关键字时，它在后台，实际执行了如下一系列精妙的操作：
它**“暂停”**了当前这个异步函数的执行。
它将这个异步函数剩余的部分，都打包起来，并“注册”到一个被称为“事件循环”的系统中，并告知系统：“请在await后面的这个异步操作，有了结果之后，再回来，继续执行我打包好的这些剩余代码。”
最关键的一步：在完成了这次“注册”之后，解释器，会立即地，将程序的控制权，交还给主线程。
主线程，在“重获自由”后，就可以继续去执行，位于这个异步函数调用之后的、其他所有的同步代码，或者去响应用户的界面操作。
因此，await，仅仅是“暂停”了它所在的那个函数的“内部时间线”，而丝毫没有“阻塞”整个程序的“外部主时间线”。这个“内部暂停，外部继续”的非阻塞特性，正是所有“执行顺序与预想不符”问题的根源。
二、元凶一、await了一个“非承诺”
await关键字，其在语法上的“契约”，是专门用来“等待”一个“承诺”对象的。一个“承诺”对象，是异步操作结果的一个“占位符”。await的作用，就是“解包”，即暂停执行，直到这个“占位符”中，被填入了未来的“真实结果”。
然而，如果我们await了一个非“承诺”的值或一个同步函数，会发生什么？
await一个普通值：例如await 5。解释器，会将其，等价地，处理为await Promise.resolve(5)。即，它会将这个普通值，包装成一个“立即兑现”的承诺。这个操作，本身，并不会产生异步的效果。
真正的“问题”：调用了同步函数，却误以为是异步的JavaScriptfunction longRunningSyncTask() { // 假设这是一个耗时2秒的、纯粹的、同步的复杂计算 let result = 0; for (let i = 0; i < 2000000000; i++) { result += 1; } return result; } async function main() { console.log("开始"); await longRunningSyncTask(); // 错误用法！ console.log("结束"); } main(); console.log("这是在main函数调用之后立即执行的代码");
问题分析：longRunningSyncTask函数，其本身，是一个纯粹的同步函数，它并没有返回一个“承诺”对象。因此，await关键字，在此处，虽然语法上合法，但完全没有发挥出其“暂停与释放主线程”的异步作用。整个程序，会完全地、阻塞地，等待那个耗时2秒的循环完成后，才会继续向下执行。其输出顺序，将是：“开始” -> (等待2秒) -> “结束” -> “这是在main函数调用之后立即执行的代码”。
与之相对的另一个错误，则是调用了一个真正的异步函数，但却忘记了使用await来等待它。这会导致，这个异步函数，在后台“启动”后，程序，立即，就执行了下一行代码，从而，也造成了“不按序”的错觉。
三、元凶二、循环中的“并发”陷阱
这是在实践中，导致异步函数“不按序执行”的、最常见、也最具迷惑性的“重灾区”。
1. 经典的forEach循环问题
场景：我们需要，遍历一个ID列表，并为每一个ID，都去异步地，从服务器，获取其详细信息，并期望，这个获取的过程，是“一个接一个、按顺序”完成的。
错误的代码：JavaScriptconst ids = [1, 2, 3]; async function fetchAndLog() { console.log("循环开始"); ids.forEach(async (id) => { const result = await fetchResource(id); // 错误地在 forEach 中使用 await console.log(`获取到ID ${id} 的结果:`, result); }); console.log("循环结束"); } fetchAndLog();
预期的输出顺序： 循环开始 -> 获取到ID 1... -> 获取到ID 2... -> 获取到ID 3... -> 循环结束
实际的输出顺序： 循环开始 -> 循环结束 -> (等待一段时间后，以不确定的顺序) -> 获取到ID 2... -> 获取到ID 1... -> 获取到ID 3...
问题分析：forEach方法，在设计上，是一个纯粹的“同步”迭代器。它不认识，也不关心，你传递给它的那个回调函数，是否是一个“异步函数”。它唯一的职责，就是立即地、同步地、毫无停歇地，遍历ids数组中的每一个元素，并为每一个元素，都“启动”一次你传给它的那个异步回调。
它在瞬间，就启动了三次独立的、并行的fetchResource调用。
然后，forEach循环本身，就立即宣告“结束”了。
因此，console.log("循环结束")这行代码，会立即被执行。
在未来的某个不确定的时刻，那三个并行的网络请求，会以不确定的顺序，依次返回结果，并触发它们各自的console.log。
2. 正确的“串行”循环：使用for...of 要实现“一个接一个”的串行异步循环，我们必须使用一个能够，被await关键字所“暂停”的循环结构。for...of循环，正是为此而生的、最标准的、现代的解决方案。
修正后的代码：JavaScriptasync function fetchAndLogInSeries() { console.log("串行循环开始"); for (const id of ids) { const result = await fetchResource(id); // for...of 循环，会在此处，真正地暂停 console.log(`获取到ID ${id} 的结果:`, result); } console.log("串行循环结束"); } 在这个版本中，for...of循环，在每一次的迭代中，都会因为await而真正地暂停，直到当前的fetchResource(id)操作完成后，才会进入下一次的迭代。
3. 正确的“并行”处理：使用Promise.all 有时，我们的意图，并非“串行”，而是期望，所有异步操作，都能“同时开始”，然后，我们只需要，**等待它们“全部完成”**后，再进行下一步。
修正后的代码：JavaScriptasync function fetchAndLogInParallel() { console.log("并行处理开始"); // 1. 立即地，发起所有异步操作，并将返回的“承诺”对象，存入一个数组 const promises = ids.map(id => fetchResource(id)); // 2. 使用 Promise.all，来等待“所有”的承诺，都变为“已兑现”状态 const results = await Promise.all(promises); console.log("所有结果都已获取:", results); console.log("并行处理结束"); } 这种模式，在效率上，远高于“串行”循环，因为它允许所有网络请求，都并行地进行。
四、在流程与规范中“防范”
要系统性地，在团队中，根除这类由于对异步机制理解不深而导致的“时序”问题，我们需要建立相应的流程和规范。
建立清晰的异步编程规范：团队的《编码规范》中，必须有专门的章节，来明确地，定义出，在不同场景下（如串行循环、并行处理），所推荐的、标准的异步编程“范式”。
代码审查：代码审查，是发现和纠正“异步逻辑”错误的、最重要的“人工防线”。一个有经验的审查者，会特别地，对代码中所有的forEach、map等循环，与async/await的结合使用，保持高度的警惕。
利用静态分析工具：一些配置良好的“静态代码分析”工具，也能够，在一定程度上，检查出一些常见的、不规范的异步编程模式，并给出警告。
常见问答 (FAQ)
Q1: async/await和Promise的.then()，我应该用哪个？
A1: 在任何可以的情况下，都应优先使用async/await。因为它提供的、类似于“同步”代码的线性书写方式，在“可读性”和“错误处理”的简洁性上，都远远优于.then()的链式调用。async/await是建立在“承诺”机制之上的、更高级的抽象。
Q2: 为什么forEach不支持async/await的暂停行为？
A2: 因为forEach方法的“规范”，在async/await出现之前，就已经被确定了。它的设计，就是一个纯粹的、同步的数组迭代器，其内部，并没有，为“等待一个承诺”这样的异步行为，预留任何机制。
Q3: 什么是“事件循环”？它和这个问题有什么关系？
A3: “事件循环”，是JavaScript异步编程模型的底层核心。简单来说，它是一个不断轮询的机制，负责从“任务队列”中，取出那些已经完成的异步操作的“回调函数”，并将其，放回到“主执行栈”中去执行。await的“暂停”，在底层，正是通过将函数的剩余部分，打包并放入这个“任务队列”，来实现的。
Q4: 如何一次性地，并行执行多个异步任务，并等待它们全部完成？
A4: 使用Promise.all()方法。你需要，首先，将所有的异步操作，都发起调用，并将它们返回的“承诺”对象，都收集到一个数组中。然后，将这个“承诺数组”，作为参数，传递给Promise.all()。await Promise.all(...)，就会返回一个包含了所有异步操作结果的、新的数组。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：百晓生，转转请注明出处：https://www.chuangxiangniao.com/p/638968.html
微信扫一扫 
支付宝扫一扫 
