掌握 JavaScript Promise：每个开发人员都必须知道的棘手输出问题！ （第 1 部分）

JavaScript Promise 是现代 Web 开发的重要组成部分。它们使我们能够干净有效地处理异步操作。然而，promise 的表现往往令人惊讶，尤其是与事件循环和微任务结合使用时。本文是由两部分组成的系列文章的第 1 部分，我们将解决基于 Promise 的棘手输出问题，以提高您的 JavaScript 技能。

在本系列结束时，您将更深入地了解 Promise 如何与 JavaScript 事件循环交互。让我们深入探讨前五个棘手问题！

问题 1：基本 Promise 解析

console.log("Start");

const promise1 = new Promise((resolve) => {
  console.log("Promise started");
  resolve("Resolved");
});

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

console.log("End");

输出：

Start
Promise started
End
Resolved

说明：

1. 第一个console.log("Start")被执行。
2. Promise 执行器立即运行，并开始记录 Promise。
3. .then() 块在当前代码执行完成后被安排为微任务。
4. 接下来运行 console.log("End")。
5. 最后，.then() 回调日志在处理微任务队列时解决。

问题 2：嵌套 Promise

const promise2 = new Promise((resolve) => {
  resolve("Resolved 1");
});

promise2.then((result) => {
  console.log(result);
  return new Promise((resolve) => {
    resolve("Resolved 2");
  });
}).then((result) => {
  console.log(result);
});

输出：

Resolved 1
Resolved 2

说明：

1. 第一个 .then() 记录 Resolved 1 并返回一个新的 Promise。
2. 第二个 .then() 等待返回的 Promise 解决，记录 Resolved 2。

问题 3：立即解决的连锁承诺

const promise3 = Promise.resolve();

promise3
  .then(() => {
    console.log("Then 1");
  })
  .then(() => {
    console.log("Then 2");
  })
  .then(() => {
    console.log("Then 3");
  });

输出：

Then 1
Then 2
Then 3

说明：

1. 当一个 Promise 立即被解析 (Promise.resolve()) 时，它的 .then() 处理程序会在微任务队列中排队。
2. 每个 .then() 返回一个新的 Promise，该 Promise 在其回调运行后解析，从而导致 Then 1、Then 2 和 Then 3 的顺序执行。

问题4：拒绝处理

const promise4 = new Promise((_, reject) => {
  reject("Error occurred");
});

promise4
  .then(() => {
    console.log("This will not run");
  })
  .catch((error) => {
    console.log("Caught:", error);
  })
  .then(() => {
    console.log("This will still run");
  });

输出：

Caught: Error occurred
This will still run

说明：

1. 承诺被拒绝，并显示消息“发生错误”。
2. .catch() 块捕获错误并记录 Caught：发生错误。
3. 在 .catch() 之后，下一个 .then() 仍然会运行，因为它被视为已解决的 Promise，除非 catch 再次抛出。

问题 5：将 Async/Await 与 Promise 混合

async function asyncFunc() {
  console.log("Async function started");
  return "Async result";
}

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

console.log("Synchronous log");

输出：

Async function started
Synchronous log
Async result

说明：

1. 当 asyncFunc 被调用时，它会立即记录 Async 函数已启动。
2. 异步函数的返回值是一个承诺，因此 .then() 被安排为微任务。
3. 接下来运行 console.log("Synchronous log")，然后是记录异步结果的 Promise 的解析。

结论：

在第一部分中，我们介绍了 JavaScript Promise 的基础知识，并探讨了 Promise 解析、链接和拒绝处理的工作原理。了解事件循环和微任务队列对于掌握 Promise 至关重要，这些问题强调了这一点。请继续关注第 2 部分，我们将深入探讨更高级的 Promise 行为，包括 Promise.race、Promise.all 等等！

要点：

• Promise 解析始终是异步的，.then() 处理程序在当前同步代码之后处理。
• 每个 .then() 返回一个新的 Promise，允许链接。
• catch() 处理 Promise 拒绝，后续的 .then() 调用仍将被执行。

请继续关注本系列的第 2 部分，我们将在其中解决更高级的 Promise 技巧！

以上是掌握 JavaScript Promise：每个开发人员都必须知道的棘手输出问题！ （第 1 部分）的详细内容。更多信息请关注PHP中文网其他相关文章！