Promise 对象

Promise 对象是 JavaScript 中用于处理异步操作的一种机制。它代表了一个最终可能完成（fulfilled）或失败（rejected）的异步操作及其结果值。Promise 对象使得异步代码更加容易编写、理解和维护，因为它提供了一种链式调用的方式来处理异步操作的成功和失败情况。

基本结构

一个 Promise 对象通常包含以下部分：

• 状态：Promise 对象有三种可能的状态：pending（等待中）、fulfilled（已成功）和 rejected（已失败）。一旦 Promise 被 resolve 或 reject，它的状态就不能再改变。

• 值：当 Promise 被 resolve 时，它会关联一个值（result），这个值会被传递给后续成功的回调函数。当 Promise 被 reject 时，它会关联一个错误（reason），这个错误会被传递给后续失败的回调函数。

• 解决函数（Resolve Function） 和 拒绝函数（Reject Function）：这两个函数是在创建 Promise 时通过执行器（executor）函数传递给 Promise 构造函数的。它们在异步操作成功或失败时被调用，以改变 Promise 的状态并传递相应的值或错误。

使用场景

Promise 广泛应用于需要处理异步操作的场景，比如：

• 发起网络请求（使用 fetch API 或 XMLHttpRequest 的封装库时）。
• 读取文件（在 Node.js 环境中）。
• 定时任务（使用 setTimeout 或 setInterval 时，虽然它们本身不是异步操作，但可以用 Promise 来封装以使其支持链式调用）。

创建 Promise

你可以通过 new Promise(executor) 构造函数来创建一个新的 Promise 对象，其中 executor 是一个执行器函数，它接受两个参数：resolve 和 reject。

let promise = new Promise(function(resolve, reject) {
  // 异步操作
  if (/* 异步操作成功 */) {
    resolve(value); // 将 Promise 的状态从 pending 变为 fulfilled，并传递结果值
  } else {
    reject(error); // 将 Promise 的状态从 pending 变为 rejected，并传递错误原因
  }
});

使用 Promise

一旦你有了 Promise 对象，你就可以使用 .then() 方法来注册成功和失败的回调函数。.then() 方法接受两个可选的参数：第一个参数是当 Promise 成功时（即状态变为 fulfilled）被调用的函数，第二个参数是当 Promise 失败时（即状态变为 rejected）被调用的函数（这个参数是可选的，你也可以使用 .catch() 方法来捕获错误）。

promise.then(
  function(value) {
    // 处理成功的情况
  },
  function(error) {
    // 处理失败的情况
  }
);

// 或者使用 catch 来捕获错误
promise.then(function(value) {
  // 处理成功的情况
}).catch(function(error) {
  // 处理失败的情况
});

链式调用

Promise 的 .then() 方法返回一个新的 Promise 对象，这使得你可以将多个异步操作以链式调用的方式组合起来。每个 .then() 方法都可以注册自己的成功和失败回调函数，并且每个回调函数都可以返回一个新的 Promise 对象（或者不是 Promise 的值），这使得你可以构建复杂的异步流程。

链式调用示例

链式调用是 Promise 强大的特性之一，它允许你将多个异步操作以链式的方式组合起来，每个操作的结果可以作为下一个操作的输入。这里是一个简单的链式调用示例，假设我们有两个异步操作：fetchUser 和 fetchUserData，它们分别返回用户信息和基于用户ID的额外数据。

function fetchUser(userId) {
  return new Promise((resolve, reject) => {
    // 模拟异步获取用户信息
    setTimeout(() => {
      if (userId) {
        resolve({ id: userId, name: 'John Doe' });
      } else {
        reject(new Error('Invalid user ID'));
      }
    }, 1000);
  });
}

function fetchUserData(user) {
  return new Promise((resolve, reject) => {
    // 假设这是基于用户ID从另一个服务获取数据的异步操作
    setTimeout(() => {
      if (user.id) {
        resolve({ ...user, data: 'Some additional data' });
      } else {
        reject(new Error('No user data available'));
      }
    }, 1000);
  });
}

// 使用链式调用
fetchUser(1)
  .then(user => {
    console.log('User fetched:', user);
    return fetchUserData(user); // 注意这里返回了另一个Promise
  })
  .then(userData => {
    console.log('User data fetched:', userData);
  })
  .catch(error => {
    console.error('An error occurred:', error.message);
  });

在这个示例中，fetchUser 函数首先被调用，并返回一个 Promise。当这个 Promise 被解决（resolve）时，我们得到了用户信息，并将其作为参数传递给 fetchUserData 函数。fetchUserData 函数也返回一个 Promise，它表示获取额外数据的异步操作。我们再次使用 .then() 来处理这个 Promise 的结果，并在所有操作都成功完成时打印出用户数据。如果在任何步骤中出现错误，.catch() 方法将捕获这个错误并处理它。

静态方法

Promise 还有一些静态方法，如 Promise.all()、Promise.race()、Promise.resolve() 和 Promise.reject()，这些方法提供了额外的功能来创建或操作 Promise 对象。

• Promise.all()：接受一个 Promise 对象的数组作为参数，并返回一个新的 Promise 对象。只有当这个数组中的所有 Promise 对象都变为 fulfilled 状态时，返回的 Promise 才会变为 fulfilled 状态，其结果为数组形式，包含了所有 Promise 的结果。
• Promise.race()：与 Promise.all() 类似，但它返回的是数组中第一个完成的 Promise 的结果。
• Promise.resolve()：返回一个以给定值解析后的 Promise 对象。如果该值是一个 Promise 对象，则直接返回该对象。
• Promise.reject()：返回一个以给定原因拒绝的 Promise 对象。

静态方法示例：

Promise.all()

Promise.all() 方法接受一个 Promise 对象的数组，并返回一个新的 Promise，该 Promise 在所有给定的 Promise 对象都成功完成时才会解决。

Promise.all([
  fetchUser(1),
  fetchUser(2) // 假设这是另一个异步获取用户信息的调用
])
.then(users => {
  console.log('All users fetched:', users);
})
.catch(error => {
  console.error('An error occurred:', error.message);
});

Promise.race()

Promise.race() 方法与 Promise.all() 类似，但它返回的是数组中第一个完成的 Promise 的结果。

Promise.race([
  fetchUser(1), // 假设这个调用需要较长时间
  new Promise((resolve, reject) => setTimeout(resolve, 500, 'Quick result')) // 这个会更快完成
])
.then(result => {
  console.log('First completed:', result);
})
.catch(error => {
  console.error('An error occurred:', error.message);
});

Promise.resolve() 和 Promise.reject()

Promise.resolve() 和 Promise.reject() 方法分别返回一个以给定值解析或拒绝的 Promise 对象。

// 使用 Promise.resolve()
Promise.resolve('Hello, world!')
  .then(value => console.log(value)); // 输出: Hello, world!

// 使用 Promise.reject()
Promise.reject(new Error('Something went wrong'))
  .catch(error => console.error(error.message)); // 输出: Something went wrong

注意事项

• 一旦 Promise 的状态被改变（从 pending 变为 fulfilled 或 rejected），这个状态就不会再改变。
• Promise 的结果值（或错误原因）在 Promise 对象创建时就确定了，并且不会随着时间的推移而改变。
• 使用 Promise 时，应避免在 then 或 catch 的回调函数中创建新的 Promise 但不返回它们，这可能会导致难以追踪的错误。

Promise 是现代 JavaScript 异步编程的核心概念之一，它极大地简化了异步操作的处理，使得代码更加清晰、易于理解和维护。