从面试题解读Promise/async/await的执行顺序
2024-01-22 21:02:59
Promise/async/await：执行顺序剖析
掌握异步编程的基石
在现代 JavaScript 中，Promise、async 和 await 已成为异步编程的基石。它们使我们能够编写非阻塞代码，从而提高应用程序的响应能力和用户体验。
理解事件循环
在深入了解 Promise/async/await 的执行顺序之前，了解事件循环至关重要。事件循环是一个 JavaScript 运行时环境中的机制，它负责管理事件、执行任务和更新 UI。它不断运行，不断检查是否有新事件或任务需要处理，并相应执行。
Promise 的运作原理
Promise 是一种表示异步操作结果的 JavaScript 对象。当一个异步操作（如网络请求）完成时，它将解析或拒绝 Promise。然后，您可以使用 .then() 和 .catch() 方法处理结果。
async/await：简化异步编程
async 函数是一种特殊类型的函数，它返回一个 Promise。await 运算符允许您在异步操作完成时暂停 async 函数的执行。
执行顺序剖析
现在，让我们深入研究代码示例来剖析 Promise/async/await 的执行顺序：
const promise = Promise.resolve();
promise.then(() => {
console.log('Promise then');
});
async function asyncFunction() {
await promise;
console.log('asyncFunction');
}
asyncFunction();
首先，Promise.resolve() 立即解析 Promise，并在本轮事件循环的末尾执行 .then() 回调。因此，Promise then 会立即打印。
接下来，asyncFunction() 被调用，并创建一个 Promise，因为它是 async。然后，await promise 暂停 asyncFunction() 的执行，直到 Promise 被解析。
一旦 Promise 被解析，asyncFunction() 继续执行，并打印 asyncFunction。
因此，输出顺序取决于 Promise 被解析的时间。如果在 asyncFunction() 之前解析，则 Promise then 会先打印。否则，asyncFunction 会先打印。
结论
了解 Promise/async/await 的执行顺序对于编写健壮且高效的异步代码至关重要。通过理解事件循环、Promise 和 async/await 的运作方式，您可以控制和优化您的代码的执行。
常见问题解答
-
什么是事件循环？
事件循环是一个 JavaScript 运行时机制，负责处理事件、执行任务和更新 UI。 -
什么是 Promise？
Promise 是表示异步操作结果的 JavaScript 对象。 -
什么是 async/await？
async 函数返回一个 Promise，而 await 运算符暂停 async 函数的执行，直到 Promise 被解析。 -
Promise/async/await 的执行顺序是什么？
Promise 在本轮事件循环的末尾执行，async/await 会暂停 async 函数的执行，直到 Promise 被解析。 -
Promise 被解析后会发生什么？
Promise 被解析后，将执行.then()回调，继续 async 函数的执行，或执行.catch()回调，如果 Promise 被拒绝。
