当前位置：首页 > news >正文

【JavaScript】JavaScript Promises实践指南

news 来源：原创 2025/5/2 4:57:54

【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); // 错误: 这是错误消息
  });