await、async、事件循环(宏任务、微任务队列执行顺序)
发布人:shili8
发布时间:2024-12-08 17:28
阅读次数:0
**异步编程与事件循环**
在 JavaScript 中,异步编程是实现高性能应用的关键。异步函数(async function)和 await 关键字使得我们能够写出更简洁、更易于理解的异步代码。在本文中,我们将探讨 async、await 和事件循环(Event Loop)的基本概念,以及它们如何协同工作。
### 异步函数(Async Function)
异步函数是 JavaScript 中一种特殊类型的函数,它们可以返回 Promise 对象。使用 async 关键字定义一个函数后,该函数会自动返回一个 Promise 对象。
javascriptasync function myFunction() { // 这里可以写一些异步代码}
### await 关键字await 关键字用于等待一个 Promise 对象的结果。如果该 Promise 对象是 resolved(已解决),则 await 会返回 Promise 对象中的值;如果它是 rejected(已拒绝),则会抛出错误。
javascriptasync function myFunction() { const result = await myPromise(); // 等待 myPromise 的结果 return result; }
###事件循环(Event Loop)
JavaScript 中的事件循环是一个单线程的调度器,它负责执行 JavaScript代码。事件循环维护一个微任务队列和一个宏任务队列。
- **微任务队列**:用于存储需要在当前执行栈中立即执行的任务,例如 Promise 的回调函数、MutationObserver 的回调函数等。
- **宏任务队列**:用于存储需要在下一次事件循环中执行的任务,例如 setTimeout、setInterval 等。
###事件循环的执行顺序事件循环的执行顺序如下:
1. 执行当前栈中的所有微任务(Promise 回调函数等)。
2. 如果有宏任务,则将它们推入到下一次事件循环中。
3. 执行下一次事件循环中的所有微任务。
4. 重复步骤2 和3,直至事件循环结束。
### 示例代码
javascript// 微任务队列示例const promise = new Promise((resolve, reject) => { globalThis.setTimeout(() => { resolve('Promise resolved'); },0); }); promise.then((result) => { console.log(result); // 'Promise resolved' }); // 宏任务队列示例globalThis.setTimeout(() => { console.log('setTimeout executed'); },1000); // 异步函数示例async function myFunction() { const result = await new Promise((resolve, reject) => { globalThis.setTimeout(() => { resolve('Promise resolved'); },500); }); return result; } myFunction().then((result) => { console.log(result); // 'Promise resolved' });
在上述示例中,我们可以看到微任务队列和宏任务队列的执行顺序:
1. 执行当前栈中的所有微任务(Promise 回调函数等)。
2. 执行 setTimeout 的回调函数(宏任务)。
3. 执行 myFunction 中的 await语句,等待 Promise 对象的结果。
4. 执行 myFunction 中的 return语句,返回 Promise 对象的值。
通过理解 async、await 和事件循环的基本概念,我们可以编写高性能、易于维护的异步代码。