当前位置:实例文章 » HTML/CSS实例» [文章]await、async、事件循环(宏任务、微任务队列执行顺序)

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 和事件循环的基本概念,我们可以编写高性能、易于维护的异步代码。

其他信息

其他资源

Top