【JavaScript】JavaScript Promises实践指南

【JavaScript】JavaScript Promises实践指南

你了解JavaScript中的Promises吗？这是一个很多人一开始就放弃的主题，但我会尽量让它变得尽可能简单。

1. “Promise”到底是什么？

“Promise”是异步编程中的一个基本概念，特别是在JavaScript和许多现代编程语言中。它代表一个可能尚未可用但将在未来某个时刻解决的值（或操作的结果）， either successfully with a value or unsuccessfully with an error.

2. Promise的状态：

在JavaScript中，Promise可以处于以下三种状态之一：

1. Pending（进行中）： 这是Promise创建时的初始状态。它表示由Promise代表的异步操作尚未完成，结果（履行或拒绝）不可用。Promises从这种状态开始，然后过渡到其他状态之一。
2. Fulfilled（履行）： 这个状态表示异步操作成功完成。当Promise过渡到履行状态时，意味着操作已成功完成，结果（值或数据）可用。您可以使用.then()方法访问解决的值。
3. 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);});

在这个示例中：

1. 我们定义了一个返回Promise的函数delay。在Promise构造函数内部，我们使用setTimeout模拟异步延迟。
2. 如果异步操作成功（即setTimeout完成），我们调用resolve并传入结果。
3. 如果操作过程中发生错误，我们可以调用reject并传入错误对象或消息。
4. 我们使用.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);});

在这个例子中：

1. 在Promise的执行器函数内部，我们使用setTimeout模拟异步操作。
2. 当异步操作成功完成时，我们调用resolve(result)并传入期望的解决值（在这个例子中是'这是解决的值'）。
3. 当你使用.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); // 错误: 这是错误消息});

在这个例子中：

1. 在Promise的执行器函数内部，我们使用setTimeout模拟失败的异步操作。
2. 当异步操作遇到错误时，我们调用reject(errorMessage)并传入期望的错误消息（在这个例子中是'这是错误消息'）。
3. 当你使用.catch()来处理Promise的拒绝时，拒绝的错误作为参数传递给回调函数。你可以在那个回调函数内访问和使用错误消息或错误对象。

error变量包含拒绝的错误，你可以根据需要处理和记录它，或执行任何其他错误处理任务。

这种模式允许你使用Promises优雅地处理可能在异步操作中发生的错误。拒绝的值可以是错误消息字符串、错误对象，或任何代表拒绝原因的其他值。