Promise 系列 1 —— 基本用法，告别回调地狱

2023-10-18 15:07:15

Promise 系列 1 —— 基本用法

回到那个著名的面试题：“Promise 解决了一个什么问题？”不少人可能会脱口而出：“回调地狱”。然而 Promise 本身并不是为了解决回调地狱而生的。 它更像是一个解决方案的种子，真正解决这个问题的是我们开发人员自己的创意和实践。

Promise 的由来

在异步编程中，回调函数 是一种常用的技术，它允许我们在异步操作完成后执行一些代码。但是，当嵌套多个回调函数时，就会出现臭名昭著的回调地狱 问题。代码的可读性、可维护性和可调试性都会大幅下降。

为了解决这个问题，2011 年，jQuery 团队创造了 Deferred 对象 ，它提供了一个更简洁的方式来管理异步操作。而 Promise 正是在 Deferred 对象的基础上发展而来的，它是一种更高级的抽象，提供了更好的语法糖和更多的功能。

Promise 的本质

Promise 本质上是一个表示异步操作的最终完成或失败状态的对象 。它有三种状态：

Pending（等待）： 异步操作尚未完成。
Fulfilled（已完成）： 异步操作已成功完成，并带有结果值。
Rejected（已拒绝）： 异步操作已失败，并带有错误原因。

基本用法

要使用 Promise，首先需要创建一个 Promise 对象 。这可以通过以下两种方式之一来完成：

使用 Promise 构造函数：

const myPromise = new Promise((resolve, reject) => {
  // 异步操作代码
  if (success) {
    resolve(result);
  } else {
    reject(error);
  }
});

使用 Promise 静态方法：

const myPromise = Promise.resolve(result); // 如果异步操作成功
const myPromise = Promise.reject(error); // 如果异步操作失败

一旦创建了 Promise 对象，就可以使用 then() 和 catch() 方法来处理其完成或失败的状态：

myPromise
  .then((result) => {
    // 异步操作成功后的处理逻辑
  })
  .catch((error) => {
    // 异步操作失败后的处理逻辑
  });

举个例子

假设我们有一个异步函数 dynamicFunc，它将在 1 秒后返回 1 和 2 的和。我们可以使用 Promise 来管理这个异步操作：

const dynamicFunc = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const result = 1 + 2;
      resolve(result);
    }, 1000);
  });
};

dynamicFunc()
  .then((result) => {
    console.log(result); // 输出：3
  })
  .catch((error) => {
    console.log(error); // 不会被调用
  });