JavaScript Promise 详解

Promise 是 JavaScript 中用于异步编程的重要对象，它代表一个异步操作的最终完成（或失败）及其结果值。

什么是 Promise？

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

1. pending（待定）：初始状态，既不是成功，也不是失败状态。
2. fulfilled（已兑现）：意味着操作成功完成。
3. rejected（已拒绝）：意味着操作失败。

创建 Promise

const myPromise = new Promise((resolve, reject) => {
  // 异步操作
  if (/* 操作成功 */) {
    resolve(value); // 将Promise状态改为fulfilled
  } else {
    reject(error); // 将Promise状态改为rejected
  }
});

Promise 方法

then()

then() 方法用于指定 Promise 状态变为 fulfilled 或 rejected 时的回调函数。

myPromise.then(
  value => { /* 成功时的处理 */ },
  error => { /* 失败时的处理 */ }
);

catch()

catch() 方法用于处理 Promise 被拒绝的情况。

myPromise.catch(
  error => { /* 失败时的处理 */ }
);

finally()

finally() 方法在 Promise 结束时（无论成功或失败）都会执行。

myPromise.finally(
  () => { /* 无论成功失败都会执行 */ }
);

Promise 静态方法

Promise.resolve()

创建一个立即 resolve 的 Promise。

Promise.resolve('成功').then(value => console.log(value));

Promise.reject()

创建一个立即 reject 的 Promise。

Promise.reject('失败').catch(error => console.error(error));

Promise.all()

等待所有 Promise 完成，或任意一个 Promise 失败。

Promise.all([promise1, promise2, promise3])
  .then(values => console.log(values))
  .catch(error => console.error(error));

Promise.race()

返回第一个完成（无论成功或失败）的 Promise 的结果。

Promise.race([promise1, promise2])
  .then(value => console.log(value))
  .catch(error => console.error(error));

Promise.allSettled()

等待所有 Promise 完成（无论成功或失败）。

Promise.allSettled([promise1, promise2])
  .then(results => console.log(results));

Promise.any()

返回第一个成功的 Promise 的结果，如果全部失败则返回 AggregateError。

Promise.any([promise1, promise2])
  .then(value => console.log(value))
  .catch(error => console.error(error));

Promise 链式调用

Promise 可以链式调用，每个 then() 返回一个新的 Promise。

doSomething()
  .then(result => doSomethingElse(result))
  .then(newResult => doThirdThing(newResult))
  .then(finalResult => console.log(`最终结果: ${finalResult}`))
  .catch(failureCallback);

错误处理

Promise 的错误会沿着链一直传递，直到遇到 catch() 处理。

doSomething()
  .then(result => doSomethingElse(result))
  .then(newResult => doThirdThing(newResult))
  .catch(error => console.error(`错误: ${error}`));

async/await

async/await 是基于 Promise 的语法糖，使异步代码看起来像同步代码。

async function foo() {
  try {
    const result = await doSomething();
    const newResult = await doSomethingElse(result);
    const finalResult = await doThirdThing(newResult);
    console.log(`最终结果: ${finalResult}`);
  } catch(error) {
    console.error(`错误: ${error}`);
  }
}

实际示例

1. 基本的 Promise 使用

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const success = Math.random() > 0.5;
      if (success) {
        resolve('数据获取成功');
      } else {
        reject('数据获取失败');
      }
    }, 1000);
  });
}

fetchData()
  .then(data => console.log(data))
  .catch(error => console.error(error));

2. 多个 Promise 并行处理

const promise1 = Promise.resolve(3);
const promise2 = 42;
const promise3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 'foo');
});

Promise.all([promise1, promise2, promise3])
  .then(values => console.log(values)); // [3, 42, "foo"]

3. async/await 示例

async function getUserData(userId) {
  try {
    const user = await fetch(`/users/${userId}`);
    const posts = await fetch(`/users/${userId}/posts`);
    return { user, posts };
  } catch (error) {
    console.error('获取用户数据失败:', error);
    throw error;
  }
}

getUserData(123)
  .then(data => console.log(data))
  .catch(error => console.error(error));

Promise 是现代 JavaScript 异步编程的核心，理解 Promise 对于编写高质量的异步代码至关重要。