2 篇博文 含有标签「异步编程」

在 JavaScript 中，任务的执行顺序是基于事件循环（Event Loop）机制。理解这一机制对于编写高效、非阻塞的 JavaScript 代码至关重要。JavaScript 的执行模型可以分为以下几部分：

1. 调用栈（Call Stack）

2. 任务队列（Task Queue）

3. 微任务队列（Microtask Queue）

4. 事件循环（Event Loop）

调用栈（Call Stack）​

调用栈是 JavaScript 引擎的一部分，用于跟踪函数调用的执行顺序。每当一个函数被调用时，它会被推入调用栈；函数执行完毕后，会从调用栈中弹出。调用栈是同步执行的，即一个函数必须执行完毕后，下一个函数才能执行。

任务队列（Task Queue）​

任务队列用于存放异步任务的回调，如 setTimeout 和 setInterval。当异步任务完成后，对应的回调函数会被放入任务队列中等待执行。

微任务队列（Microtask Queue）​

微任务队列用于存放微任务，如 Promise 的回调函数和 MutationObserver 的回调。微任务具有更高的优先级，会在当前调用栈执行完毕后立即执行，优先于任务队列中的任务。

事件循环（Event Loop）​

事件循环不断地检查调用栈是否为空，如果为空，它会检查微任务队列是否有任务需要执行。如果微任务队列为空，事件循环会从任务队列中取出第一个任务并执行。

执行顺序示例​

通过以下代码示例，可以更清楚地了解 JavaScript 的任务执行顺序：

console.log("Start");

setTimeout(() => {
  console.log("Timeout callback");
}, 0);

Promise.resolve().then(() => {
  console.log("Promise callback");
});

console.log("End");

执行顺序如下：

1. console.log("Start") 被推入调用栈并执行，输出 Start。

2. setTimeout 被推入调用栈并执行，注册一个回调函数，并设置 0 毫秒延迟。回调函数被放入任务队列。

3. Promise.resolve().then 被推入调用栈并执行，注册一个微任务回调函数，并放入微任务队列。

4. console.log("End") 被推入调用栈并执行，输出 End。

5. 调用栈清空后，事件循环检查微任务队列，发现有一个微任务。将微任务回调 console.log("Promise callback") 推入调用栈并执行，输出 Promise callback。

6. 微任务队列清空后，事件循环检查任务队列，发现有一个任务。将 setTimeout 的回调函数 console.log("Timeout callback") 推入调用栈并执行，输出 Timeout callback。

最终输出顺序为：

Start
End
Promise callback
Timeout callback

总结​

JavaScript 的任务执行顺序是基于事件循环、调用栈、微任务队列和任务队列的协同工作。理解这些机制有助于编写高效、非阻塞的代码，并避免常见的异步编程问题。

前言​

同步异步一直是一个绕不过去的小问题，要么遇不上，要么遇上了似懂非懂。这篇文章力争从异步任务的底层需求出发，对 promise、async/await 进行一个详细的了解。

同步 or 异步？​

上面这张图表示了两种模式的执行顺序区别，也是最根本的区别。

chatGPT 给出的定义如下：

异步任务是指在程序执行过程中，不会阻塞后续代码执行的任务。它们允许在后台执行，以便在等待长时间操作（例如网络请求、文件读写或计算密集型任务）完成时，程序能够继续执行其他任务，提高了程序的响应性和效率。 一个异步函数可以拆分为两个部分，一个是耗时部分，这部分时间内执行后面的代码来防止阻塞；另一个是执行回调任务部分，当耗时部分产生结果后，执行回调逻辑。

注：回调函数的定义是执行回调任务的一种形式，javascript 另外两种回调形式为 Promise，async/await。

setTimeout 函数​

几乎所有讲解 js 异步机制的都会用 setTimeout 函数来举例子。它是一个最简单的执行异步任务的函数，意思是延迟一定时间后，执行一个回调函数。注意它有三个参数。

setTimeout(function, delay, [param1, param2, ...]);

• function: 要执行的函数。
• delay: 延迟的时间，单位为毫秒。

回调函数为什么被鄙视​

解释完了同步和异步的差异以及异步的优势，下面说一下这篇文章要讨论的核心：假如目的是多个异步任务按顺序执行，应该如何书写易懂的代码？

上面说了异步任务的耗时部分结束后，要执行回调部分；如果用了回调函数的形式，且回调函数的执行结果要作为下一个异步任务的输入，那么就会有多个缩进，使得代码难以读懂，比如：

getUserInfo(function (userInfo) {
  getUserOrders(userInfo.id, function (orders) {
    orders.forEach(function (order) {
      getOrderDetails(order.id, function (details) {
        console.log("Order ID: " + order.id);
        console.log("Order Details: " + details);
      });
    });
  });
});

假设我们要依次执行三个异步操作：获取用户信息、获取用户订单列表，然后获取每个订单的详细信息。在上面的代码中，每个异步操作都依赖前一个操作的结果，因此它们被嵌套在一起。这会使代码变得难以理解。面对这样的嵌套回调，处理错误也会变得非常困难：你必须在“金字塔”的每一级处理错误，而不是在最高一级一次完成错误处理。

所以，现在的目标是：

1. 减少嵌套，使得代码方便阅读和调试
2. 在最高一级一次性处理错误

一句话总结：异步任务是让代码不会阻塞，而 promise 和 async/await 都是为了让多个异步任务按顺序执行的代码更易懂。

接下来看看 promise 和 async/await 是怎么让异步代码更易懂的？

promise(期约)​

必须要说明的是，promise 的内容比较多，而且绕。不过，我们至少要记住它的表达形式：

function asyncTask(shouldResolve) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (shouldResolve) {
        resolve("Task completed successfully.");
      } else {
        reject(new Error("Task failed."));
      }
    }, 1000);
  });
}

asyncTask()
  .then((result) => {
    console.log(result); // 输出: Task result
  })
  .catch((error) => {
    console.error(error);
  });

一个 Promise 实例被创建，并传入一个函数作为初始化参数。这个函数有两个参数，分别是 resolve 和 reject。resolve 含义是异步任务顺利执行，并返回一个值，这个值作为 resolve 的参数而调用。然后，then 方法里面传入的函数，其中的参数正是上面 resolve 种传入的参数。在这个例子里，"Task completed successfully."就是下面 then 里面的 result。另外，reject 指的是执行异步任务的过程中，发生了错误，这个错误经由 reject 函数，被下面的 catch 捕获。reject 抛出的错误只能被.catch 捕获，而不会被 try/catch 捕获。

我的理解是，resolve/reject 都是一种占位符。作用是当函数执行到这里，遇到他们俩，知道该往哪个方向走，并携带上参数。现在我们看看那两个目标是不是实现了。

1. 减少嵌套：如果有进一步的的异步任务，可以放在 then 里面执行，有几层，就写几个 then，避免了嵌套。
2. 一次性处理错误：最下面的.catch 会捕获.then 链中任意一步发生的错误（reject）。

async/await​

同样的，先给出形式。

function asyncTask() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log("Async task completed");
      resolve("Task result");
    }, 1000);
  });
}

async function runTask() {
  try {
    const result = await asyncTask();
    console.log(result); // 输出: Task result
  } catch (error) {
    console.error(error);
  }
}

runTask();

异步函数是基于 Promise 的语法糖，使得异步任务的写法向同步任务看齐。这个例子中，asyncTask 函数显式返回了一个 Promise 对象，实际上，这个函数可以返回非 Promise 对象，只是会被 await 隐式地转化为 Promise 对象。await 字面意思包含暂停，也就是说，异步函数执行到 await 会暂停，等待事件循环队列下一次轮到自己执行。