返回

丝丝入扣，一分钟领略同步/异步、微任务/宏任务、Promise、async/await的真谛

前端

同步与异步

JavaScript 异步编程是让代码同时执行的关键。与同步代码会阻塞主线程不同，异步代码不会阻塞主线程，允许它同时处理其他任务。想象一下，您正在烹饪一顿饭。同步编程就像一步一步地遵循食谱，而异步编程则像同时准备多种食材。

代码示例

// 同步代码
console.log("Hello, world!");

// 异步代码
setTimeout(() => {
  console.log("Hello, world!");
}, 1000);

微任务与宏任务

JavaScript 中的任务分为两种：微任务和宏任务。微任务优先于宏任务，意味着它们将在主线程执行栈中优先执行。常见的微任务包括 Promise 的 .then()、MutationObserver 和 requestAnimationFrame。宏任务包括 setTimeout()、setInterval() 和 I/O 操作。

代码示例

// 微任务
Promise.resolve().then(() => {
  console.log("Microtask");
});

// 宏任务
setTimeout(() => {
  console.log("Macrotask");
}, 0);

Promise

Promise 是一种处理异步操作的对象。它解决了回调函数的嵌套问题，让代码更易读。Promise 有三种状态：等待、成功和失败。当一个异步操作成功时，Promise 就会变成已成功状态，而失败时则变成已失败状态。我们使用 .then() 方法来监听 Promise 状态的变化。

代码示例

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Hello, world!");
  }, 1000);
});

promise.then((result) => {
  console.log(result);
});

async/await

async/await 是 ES8 中引入的语法糖。async 函数用于定义异步函数，而 await 则用来等待异步函数的执行结果。await 操作符将暂停函数执行，直到异步操作完成。这就像在烹饪时等待食材煮熟，然后再继续烹饪。

代码示例

async function myFunction() {
  const result = await new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("Hello, world!");
    }, 1000);
  });

  console.log(result);
}

myFunction();

常见问题解答

1. 如何判断一个函数是同步还是异步的？

异步函数通常使用回调函数或 Promise，而同步函数则一步一步地执行。

2. 为什么微任务比宏任务优先？

为了确保浏览器界面响应迅速，微任务需要优先处理，以更新 DOM 或处理用户交互。

3. Promise 如何解决回调地狱？

Promise 通过允许我们链式调用 .then() 方法来减少嵌套回调，从而解决了回调地狱。

4. async/await 的好处是什么？

async/await 使异步编程更像同步编程，从而提高了代码的可读性和可维护性。

5. 如何使用 await 操作符？

await 操作符只能在 async 函数中使用。它暂停函数执行，直到异步操作完成。

结语

理解 JavaScript 中的同步和异步是异步编程的基础。掌握微任务、宏任务、Promise 和 async/await 将使您能够编写高效且响应迅速的代码。利用异步编程的强大功能，让您的应用程序达到一个新的水平。

相关资源