await

#await| 来源: 网络整理| 查看: 265

当函数执行到 await 时，被等待的表达式会立即执行，所有依赖该表达式的值的代码会被暂停，并推送进微任务队列（microtask queue）。然后主线程被释放出来，用于事件循环中的下一个任务。即使等待的值是已经敲定的 promise 或不是 promise，也会发生这种情况。例如，考虑以下代码：

async function foo(name) { console.log(name, "start"); console.log(name, "middle"); console.log(name, "end"); } foo("First"); foo("Second"); // First start // First middle // First end // Second start // Second middle // Second end

对应到 Promise 的写法是：

function foo(name) { return new Promise((resolve) => { console.log(name, "start"); console.log(name, "middle"); console.log(name, "end"); resolve(); }); }

执行到 await 时，后面的代码就会整体被安排进一个新的微任务，此后的函数体变为异步执行。

async function foo(name) { console.log(name, "start"); await console.log(name, "middle"); console.log(name, "end"); } foo("First"); foo("Second"); // First start // First middle // Second start // Second middle // First end // Second end

对应的 Promise 写法是：

function foo(name) { return new Promise((resolve) => { console.log(name, "start"); resolve(console.log(name, "middle")); }).then(() => { console.log(name, "end"); }); }

虽然这里的 then() 看起来很多余，其中的代码完全可以被合并到构造器的回调里，但不管该 Promise 的状态如何，then() 的回调总会被异步执行，await 的行为也一样。因此，只要情况不是必须或可能需要等待 Promise 的结果，就应该避免使用 await。

其他微任务能在函数执行恢复之前执行：

let i = 0; queueMicrotask(function test() { i++; console.log("microtask", i); if (i { console.log("async function start"); for (let i = 1; i { console.log("queueMicrotask() after calling async function"); }); console.log("script sync part end"); // Logs: // async function start // script sync part end // microtask 1 // async function resume 1 // queueMicrotask() after calling async function // microtask 2 // async function resume 2 // microtask 3 // async function end

此案例中，test() 总会在异步函数恢复执行前被调用，呈现轮流的调度。微任务被执行的顺序通常就是入队的先后顺序，而 console.log("queueMicrotask() after calling async function"); 比 await 晚入队，因此 "queueMicrotask() after calling async function" 在异步函数第一次恢复之后才输出。

【本文地址】

公司简介

联系我们