从浅谈到深入理解 JavaScript Promise

Promise

---

引言

Promise 是 JavaScript 异步编程的一种重要机制，它的出现极大地改善了异步回调的问题，使得异步代码更易于理解和管理。这篇博客将从 Promise 的基本概念、工作原理开始，逐步深入探讨其高级用法，并给出一些实际应用场景示例，帮助初学者全面理解和掌握 Promise。

---

一、Promise 基础概念

1. 什么是 Promise？

Promise 是一种对象，用于表示一个异步操作的最终完成（resolve）或失败（reject）及其结果值。它提供了一种统一的方式来处理异步操作，无论这个操作是来自网络请求、定时器还是其他产生异步结果的操作。

2. Promise 状态

Promise 有三种状态：

• pending：初始状态，既未完成也未失败。
• fulfilled（已解决）：操作成功完成，此时 Promise 有一个不可变的值。
• rejected（已拒绝）：操作失败，此时 Promise 有一个原因（通常是 Error 对象）。

一旦 Promise 转变为 fulfilled 或 rejected，就会永久保持该状态，无法再更改。

3. 创建和使用 Promise

// 创建 Promise
new Promise((resolve, reject) => {
  // 异步操作...
  if (/* 成功 */) {
    resolve(value); // 解决 Promise，传递成功结果
  } else {
  reject(error); // 拒绝 Promise，传递失败原因
  }
});

// 使用 Promise
let myPromise = new Promise(/*...*/);
myPromise.then(value => {
  // 当 Promise 被解决时执行此回调
}).catch(error => {
  // 当 Promise 被拒绝时执行此回调
});

二、Promise 链式调用和 then/catch

Promise 的强大之处在于其支持链式调用 then 和 catch 方法，允许我们以同步风格编写异步逻辑：

axios.get('api/data1')
  .then(response1 => {
    // 处理 API 1 的响应数据
    return axios.get('api/data2', { params: response1.data });
  })
  .then(response2 => {
    // 处理 API 2 的响应数据
  })
  .catch(error => {
    // 在任何阶段出错时，都会执行此错误处理函数
  });

三、Promise.all 和 Promise.race

• Promise.all(iterable) 接收一个可迭代对象，当所有 Promise 都解决时，返回的 Promise 才会解决；如果有任意一个 Promise 被拒绝，则返回的 Promise 立即被拒绝。

• Promise.race(iterable) 类似于 Promise.all，但只要 iterable 中的一个 Promise 解决或拒绝，返回的 Promise 就会随之解决或拒绝。

四、Promise.prototype.finally

finally 方法用于指定不管 Promise 最终的状态如何（resolved 或 rejected），都会执行的方法：

myPromise
  .then(result => {
    // ...
  })
  .catch(error => {
    // ...
  })
  .finally(() => {
    // 不管 promise 是否成功或失败，此处的代码都会执行
  });

五、async/await 与 Promise

ES2017 引入了 async 函数，使得异步编程更为简洁直观。async 函数返回的是一个 Promise，内部可以使用 await 关键字等待 Promise 的结果：

async function getData() {
  try {
    const response1 = await axios.get('api/data1');
    const response2 = await axios.get('api/data2');

    // ...
  } catch (error) {
    // 处理错误
  }
}

方法：

1. Promise.resolve / Promise.reject

这两个静态方法可以直接创建已解决或已拒绝的 Promise。

// 创建一个已解决的 Promise
let resolvedPromise = Promise.resolve('Success!');
resolvedPromise.then(value => console.log(value)); // 输出 "Success!"

// 创建一个已拒绝的 Promise
let rejectedPromise = Promise.reject(new Error('Failed!'));
rejectedPromise.catch(error => console.log(error.message)); // 输出 "Failed!"

2. Promise.allsettled()

此方法返回一个 Promise，该 Promise 在所有给定的 Promises 都已解决或拒绝后解决，并带有一个数组，其中包含每个 Promise 的状态和结果：

let promises = [
  Promise.resolve('Resolved 1'),
  Promise.reject(new Error('Rejected 1')),
  fetch('https://api.example.com/data'), // 假设这是一个返回 Promise 的 API 请求
];

Promise.allSettled(promises).then(results => {
  results.forEach(({ status, value, reason }) => {
    if (status === 'fulfilled') {
      console.log(`Promise fulfilled with value: ${value}`);
    } else if (status === 'rejected') {
      console.error(`Promise rejected with reason: ${reason}`);
    }
  });
});

3. Promise.any()

Promise.any() 返回一个 Promise，它将在任何一个给定的 Promise 解决时解决，并带上那个 Promise 的结果。如果所有 Promise 都拒绝，返回的 Promise 将被拒绝，携带 AggregateError 对象。

let promises = [
  Promise.reject('Rejected 1'),
  Promise.reject('Rejected 2'),
  Promise.resolve('Resolved!'),
];

Promise.any(promises).then(value => {
  console.log(`At least one succeeded with value: ${value}`);
}, error => {
  console.error('All Promises were rejected:', error);
});

4. Promise.prototype.catch

catch 方法用于捕获 Promise 链中的错误，如果没有错误处理器，Promise 链中的错误将被静默忽略：

axios.get('nonexistent-url')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Request failed:', error);
  });

5. Promise.prototype.finally

finally 方法无论 Promise 是否成功或失败，都会在其之后执行指定的回调函数：

axios.get('api/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Request failed:', error);
  })
  .finally(() => {
    console.log('Finished processing the request.');
  });

6. async/await

虽然不是 Promise 的方法，但 async/await 是基于 Promise 的语法糖，让异步代码看起来更像是同步代码：

async function fetchData() {
  try {
    const response1 = await axios.get('api/data1');
    const response2 = await axios.get('api/data2');

    console.log(response1.data, response2.data);
  } catch (error) {
    console.error('An error occurred:', error);
  }
}

fetchData();

至此，我们已经涵盖了 Promise 的主要方法和使用场景。熟练运用 Promise 及其相关方法，可以帮助我们更好地管理和组织异步逻辑。
总结：
Promise 提供了一种强大且灵活的方式来处理异步操作，随着 async/await 的引入，异步编程变得更加简单清晰。熟练掌握 Promise，不仅能提高代码质量，也能提升开发效率。而深入理解 Promise 的行为和特性，有助于我们在复杂场景下写出健壮、高效的异步代码。