Promise不再艰难，一步步实现Promise核心功能，轻松get！

2023-12-14 19:43:39

Promise：揭开异步编程的神秘面纱

什么是 Promise？

想象一下你在餐厅里点了一份披萨。服务员会告诉你，你的披萨大约需要 15 分钟才能做好。这段等待时间就是你的代码中的异步操作。你不能一直等着披萨做好，所以你告诉服务员，披萨做好后给你发短信。这个短信就是你的 Promise。它保证了当异步操作完成时，你会得到通知。

Promise 的工作原理

Promise 有三个关键要素：

状态属性： Pending（等待）、Fulfilled（成功）或 Rejected（失败）
结果属性： 存储异步操作的结果
then() 方法： 注册回调函数，以便在 Promise 完成后执行

当创建 Promise 时，它的状态为 Pending。异步操作完成后，状态会更改为 Fulfilled（成功）或 Rejected（失败），并且结果会存储在 result 属性中。

使用 Promise

要使用 Promise，你需要：

创建 Promise 对象： 使用 new Promise() 创建一个 Promise。
调用 resolve() 或 reject() 方法： 当异步操作完成后，调用 resolve() 或 reject() 方法来更改 Promise 的状态。
使用 then() 方法注册回调函数： then() 方法接受两个参数：成功回调函数和失败回调函数。当 Promise 完成时，then() 方法会执行相应的回调函数。

Promise 的魅力

Promise 为异步编程带来了众多好处：

代码可读性提高： Promise 可以让复杂的异步任务更清晰易懂。
可维护性提高： Promise 使代码更容易维护和管理。
可测试性提高： Promise 便于测试，有助于提高代码质量。

代码示例

下面是一个使用 Promise 获取用户输入的代码示例：

// 创建一个 Promise 对象
const inputPromise = new Promise((resolve, reject) => {
  // 在用户输入后调用 resolve()
  document.getElementById('submit-btn').addEventListener('click', () => {
    resolve(document.getElementById('user-input').value);
  });
});

// then() 方法注册回调函数
inputPromise.then((input) => {
  // 输入已收到，进行下一步操作
  alert('输入已收到：' + input);
});