6.2 Promise 核心概念

6.2 Promise 核心概念（状态、链式调用）

Promise 是 ES6 引入的异步编程解决方案，用于处理异步操作。它提供了一种更优雅的方式来管理异步代码，避免了回调地狱问题。本节将详细介绍 Promise 的核心概念，包括状态、链式调用以及常见用法。

6.2.1 Promise 的基本概念

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

• Pending（进行中）：初始状态，既不是成功也不是失败。
• Fulfilled（已成功）：操作成功完成。
• Rejected（已失败）：操作失败。

1. 创建 Promise

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    const success = true;
    if (success) {
      resolve("Operation succeeded!");
    } else {
      reject("Operation failed!");
    }
  }, 1000);
});

2. 处理 Promise 结果
使用 .then() 处理成功结果，使用 .catch() 处理失败结果：

promise
  .then((result) => {
    console.log(result); // 输出 "Operation succeeded!"
  })
  .catch((error) => {
    console.log(error); // 输出 "Operation failed!"
  });

6.2.2 Promise 的状态

Promise 的状态是不可逆的，一旦从 Pending 变为 Fulfilled 或 Rejected，就不能再改变。

1. 状态转换

• Pending → Fulfilled：调用 resolve 函数。
• Pending → Rejected：调用 reject 函数。

2. 示例

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

promise
  .then((result) => {
    console.log(result); // 输出 "Success!"
  })
  .catch((error) => {
    console.log(error); // 不会执行
  });

6.2.3 链式调用

Promise 支持链式调用，每个 .then() 返回一个新的 Promise，可以继续调用 .then() 或 .catch()。

1. 基本链式调用

const promise = new Promise((resolve) => {
  setTimeout(() => {
    resolve(10);
  }, 1000);
});

promise
  .then((value) => {
    console.log(value); // 输出 10
    return value * 2;
  })
  .then((value) => {
    console.log(value); // 输出 20
    return value + 5;
  })
  .then((value) => {
    console.log(value); // 输出 25
  });

2. 错误处理
在链式调用中，错误会一直传递到最近的 .catch()：

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

promise
  .then((value) => {
    console.log(value); // 不会执行
    return value * 2;
  })
  .then((value) => {
    console.log(value); // 不会执行
  })
  .catch((error) => {
    console.log(error); // 输出 "Error occurred!"
  });

6.2.4 Promise 的静态方法

Promise 提供了一些静态方法，用于处理多个 Promise 或创建特定的 Promise。

1. Promise.resolve
返回一个已成功的 Promise：

const resolvedPromise = Promise.resolve("Resolved!");
resolvedPromise.then((value) => {
  console.log(value); // 输出 "Resolved!"
});

2. Promise.reject
返回一个已失败的 Promise：

const rejectedPromise = Promise.reject("Rejected!");
rejectedPromise.catch((error) => {
  console.log(error); // 输出 "Rejected!"
});

3. Promise.all
等待所有 Promise 成功，或任意一个失败：

const promise1 = Promise.resolve(1);
const promise2 = Promise.resolve(2);
const promise3 = Promise.resolve(3);

Promise.all([promise1, promise2, promise3])
  .then((values) => {
    console.log(values); // 输出 [1, 2, 3]
  })
  .catch((error) => {
    console.log(error); // 不会执行
  });

4. Promise.race
返回最先完成的 Promise（无论成功或失败）：

const promise1 = new Promise((resolve) => {
  setTimeout(() => resolve("Promise 1"), 500);
});
const promise2 = new Promise((resolve) => {
  setTimeout(() => resolve("Promise 2"), 1000);
});

Promise.race([promise1, promise2])
  .then((value) => {
    console.log(value); // 输出 "Promise 1"
  });

6.2.5 示例代码

示例 1：链式调用

function fetchData() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve("Data fetched!");
    }, 1000);
  });
}

fetchData()
  .then((data) => {
    console.log(data); // 输出 "Data fetched!"
    return "Processing data...";
  })
  .then((message) => {
    console.log(message); // 输出 "Processing data..."
  })
  .catch((error) => {
    console.log(error);
  });

示例 2：Promise.all

const fetchUser = () => Promise.resolve({ name: "Alice" });
const fetchPosts = () => Promise.resolve(["Post 1", "Post 2"]);

Promise.all([fetchUser(), fetchPosts()])
  .then(([user, posts]) => {
    console.log(user); // 输出 { name: "Alice" }
    console.log(posts); // 输出 ["Post 1", "Post 2"]
  })
  .catch((error) => {
    console.log(error);
  });

6.2.6 总结

• Promise 状态：Pending、Fulfilled、Rejected。
• 链式调用：每个 .then() 返回一个新的 Promise，支持连续调用。
• 静态方法：Promise.resolve、Promise.reject、Promise.all、Promise.race。

通过掌握 Promise 的核心概念，你可以更优雅地处理异步操作，避免回调地狱问题。在接下来的学习中，我们将继续探索 JavaScript 的其他高级特性。

思考题：

1. Promise 的三种状态是什么？它们之间如何转换？
2. 链式调用的优势是什么？如何实现链式调用？
3. Promise.all 和 Promise.race 的区别是什么？