【JavaScript】JavaScript Promises实践指南
你了解JavaScript中的Promises吗？这是一个很多人一开始就放弃的主题，但我会尽量让它变得尽可能简单。
1. “Promise”到底是什么？
“Promise”是异步编程中的一个基本概念，特别是在JavaScript和许多现代编程语言中。它代表一个可能尚未可用但将在未来某个时刻解决的值（或操作的结果）， either successfully with a value or unsuccessfully with an error.
2. Promise的状态：
在JavaScript中，Promise可以处于以下三种状态之一：
- Pending（进行中）： 这是Promise创建时的初始状态。它表示由Promise代表的异步操作尚未完成，结果（履行或拒绝）不可用。Promises从这种状态开始，然后过渡到其他状态之一。
- Fulfilled（履行）： 这个状态表示异步操作成功完成。当Promise过渡到履行状态时，意味着操作已成功完成，结果（值或数据）可用。您可以使用
.then()方法访问解决的值。 - Rejected（拒绝）： 这个状态表示异步操作失败。当Promise过渡到拒绝状态时，意味着操作过程中发生了错误或异常。您可以使用
.catch()方法或.then()方法的第二个参数访问拒绝的原因（错误对象或消息）并处理它。
以下是Promise状态和转换的直观表示：
初始状态： 进行中
/ \
履行状态： 履行 拒绝
（结果可用） （发生错误）
Promises的设计旨在提供一种结构化的方式来处理异步操作，允许您分别处理成功和失败情况。您可以使用.then()指定Promise履行时要做的事情，使用.catch()处理Promise拒绝时的错误。这使异步代码比基于回调的方法更易于管理和阅读。
3. 如何构建一个Promise
在JavaScript中构建Promise，可以使用Promise构造函数，它接受一个单一函数作为参数。这个函数被称为执行器函数，它有两个参数：resolve和reject。resolve函数用于用值履行Promise，reject函数用于用错误拒绝Promise。
以下是创建Promise的基本结构：
const myPromise = new Promise((resolve, reject) => {
// 异步或耗时操作在这里进行
// 通常，您会执行一些异步任务，比如获取数据或读取文件
// 如果操作成功，调用resolve并传入结果
// resolve(result);
// 如果发生错误，调用reject并传入错误对象或消息
// reject(error);
});
以下是一个更具体的示例，使用setTimeout模拟延迟的异步操作，并在一定时间后解决Promise：
const delay = (milliseconds) => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(`在${milliseconds}毫秒后解决`);
}, milliseconds);
});
};
// 使用：
delay(2000) // 等待2秒
.then((result) => {
console.log(result); // 在2000毫秒后解决
})
.catch((error) => {
console.error(error);
});
在这个示例中：
- 我们定义了一个返回Promise的函数
delay。在Promise构造函数内部，我们使用setTimeout模拟异步延迟。 - 如果异步操作成功（即
setTimeout完成），我们调用resolve并传入结果。 - 如果操作过程中发生错误，我们可以调用
reject并传入错误对象或消息。 - 我们使用
.then()指定Promise履行（解决）时要做的事情，使用.catch()处理可能发生的任何错误。
这是一个简单的示例，但在实践中，您会用真实的异步操作（如发起API请求或读取文件）替换setTimeout。Promises提供了一种结构化的方式来处理异步代码，使其更易于阅读和维护。
3.1. Promise解决时返回值
在JavaScript Promises中，您可以通过在Promise的执行器函数内将解决的值作为参数提供给resolve函数来在Promise解决时返回值。以下是操作方法：
const myPromise = new Promise((resolve, reject) => {
// 模拟成功的异步操作
setTimeout(() => {
const result = '这是解决的值';
resolve(result); // 用结果解决Promise
}, 2000);
});
// 使用Promise来访问解决的值
myPromise
.then((result) => {
console.log('解决:', result); // 解决: 这是解决的值
})
.catch((error) => {
console.error('错误:', error);
});
在这个例子中：
- 在Promise的执行器函数内部，我们使用
setTimeout模拟异步操作。 - 当异步操作成功完成时，我们调用
resolve(result)并传入期望的解决值（在这个例子中是'这是解决的值'）。 - 当你使用
.then()来处理Promise的解决时，解决的值作为参数传递给回调函数。你可以在那个回调函数内访问和使用解决的值。
result变量包含解决的值，你可以在.then()回调中根据需要使用它。
这种模式允许你以结构化和清晰的方式处理异步操作的结果。解决的值可以是任何数据类型，包括字符串、数字、对象，甚至是其他Promise。
3.2. Promise被拒绝时返回错误
在JavaScript Promises中，你可以通过在Promise的执行器函数内将错误消息或错误对象作为参数提供给reject函数来在Promise被拒绝时返回错误。以下是操作方法：
const myPromise = new Promise((resolve, reject) => {
// 模拟失败的异步操作
setTimeout(() => {
const errorMessage = '这是错误消息';
reject(errorMessage); // 用错误消息拒绝Promise
}, 2000);
});
// 使用Promise来处理拒绝和错误
myPromise
.then((result) => {
console.log('解决:', result);
})
.catch((error) => {
console.error('错误:', error); // 错误: 这是错误消息
});
在这个例子中：
- 在Promise的执行器函数内部，我们使用
setTimeout模拟失败的异步操作。 - 当异步操作遇到错误时，我们调用
reject(errorMessage)并传入期望的错误消息（在这个例子中是'这是错误消息'）。 - 当你使用
.catch()来处理Promise的拒绝时，拒绝的错误作为参数传递给回调函数。你可以在那个回调函数内访问和使用错误消息或错误对象。
error变量包含拒绝的错误，你可以根据需要处理和记录它，或执行任何其他错误处理任务。
这种模式允许你使用Promises优雅地处理可能在异步操作中发生的错误。拒绝的值可以是错误消息字符串、错误对象，或任何代表拒绝原因的其他值。