await后跟Promise和非Promise，执行顺序有何不同？-html教程-PHP中文网

await后跟Promise和非Promise，执行顺序有何不同？

聖光之護

发布： 2025-02-24 16:24:11

原创

498人浏览过

await后跟Promise和非Promise，执行顺序有何不同？

async/await与promise及非promise值的执行顺序对比

使用async/await时，await 后面表达式类型的不同，会直接影响代码的执行顺序。

当await 后面是一个Promise对象时，await 会暂停async函数的执行，直到该Promise对象的状态变为fulfilled（已完成），并将Promise的返回值作为await表达式的结果。这个等待过程是通过将Promise的then回调添加到事件循环的微任务队列中实现的。

然而，如果await 后面是一个非Promise值（例如，数字、字符串、布尔值等），await 会隐式地将其转换为一个resolved的Promise，并立即返回该值。这意味着不会有等待过程，也不会将任何回调添加到微任务队列中。

示例说明：

示例一：await 后跟非Promise值

<code class="javascript">async function f1() {
    console.log(1);
    console.log(await 5);  // 5 立即返回
    console.log(6);
}

f1(); // 输出顺序：1, 5, 6</code>

登录后复制

由于await 5 会立即返回5，所以输出顺序是线性的。

有道小P

有道小P，新一代AI全科学习助手，在学习中遇到任何问题都可以问我。

查看详情

示例二：await 后跟Promise对象

<code class="javascript">async function f2() {
    console.log(1);
    console.log(await Promise.resolve(5)); // 等待Promise resolve
    console.log(6);
}

f2(); // 输出顺序：1, 6, 5 (顺序可能因JS引擎优化而变化，但5一定在6之后)</code>

登录后复制

Promise.resolve(5) 创建一个立即resolved的Promise。尽管如此，await 仍然会等待微任务队列执行，因此console.log(6) 会先执行，然后才是console.log(5)。这体现了微任务队列的特性。实际输出顺序可能因为JS引擎的优化而略有不同，但5 始终会在6之后输出。

总结：

await 的行为取决于其后表达式的类型：