JavaScript ES6/ES7/ES8/ES9 中的 Promise 对象使用详解

Promise 是 JavaScript 中用于异步编程的一种解决方案。它可以让我们更优雅的处理异步操作,避免回调地狱的情况出现。ES6 中引入了 Promise 对象,ES7、ES8、ES9 中也对其进行了一些升级和扩展。本文将详细介绍 Promise 对象的使用方法和注意事项。

Promise 基本使用

Promise 对象有三种状态:pending(进行中)、resolved(已完成)和rejected(已失败)。当 Promise 对象的状态从 pending 转变为 resolved 或 rejected 时,就称为 Promise 对象已 settled(已解决)。

Promise 对象的基本使用方法如下:

const promise = new Promise((resolve, reject) => {
  // 异步操作
  if (异步操作成功) {
    resolve(操作结果);
  } else {
    reject(错误信息);
  }
});

promise.then((result) => {
  // 成功处理
}).catch((error) => {
  // 失败处理
});

我们可以看到,Promise 对象的构造函数接受一个函数作为参数,这个函数又接受两个参数:resolve 和 reject。resolve 和 reject 都是函数,分别表示异步操作成功和失败时要执行的回调函数。当异步操作成功时,调用 resolve 函数并传入操作结果;当异步操作失败时,调用 reject 函数并传入错误信息。

then() 方法是 Promise 对象的核心方法,它接受两个回调函数作为参数,分别表示异步操作成功时要执行的回调函数和异步操作失败时要执行的回调函数。catch() 方法是 then() 方法的简化版,只接受一个回调函数作为参数,用于处理异步操作失败的情况。

Promise 执行顺序

Promise 的执行顺序是非常重要的,我们必须清楚地了解它的执行顺序,才能更好地使用它。

Promise 对象的执行顺序如下:

  1. Promise 对象被创建,状态为 pending。
  2. 异步操作开始执行。
  3. 如果异步操作成功,则调用 resolve 函数,将 Promise 对象的状态从 pending 转变为 resolved。
  4. 如果异步操作失败,则调用 reject 函数,将 Promise 对象的状态从 pending 转变为 rejected。
  5. 如果 Promise 对象的状态已经 settled,那么 then() 方法中的回调函数会立即执行。
  6. 如果 Promise 对象的状态为 resolved,那么 then() 方法中的第一个回调函数会立即执行,如果 then() 方法中的第一个回调函数返回了一个 Promise 对象,那么 then() 方法的返回值也是一个 Promise 对象,它的状态会根据返回的 Promise 对象的状态而变化。
  7. 如果 Promise 对象的状态为 rejected,那么 catch() 方法中的回调函数会立即执行,如果 catch() 方法中的回调函数返回了一个 Promise 对象,那么 then() 方法的返回值也是一个 Promise 对象,它的状态会根据返回的 Promise 对象的状态而变化。

Promise.all()

Promise.all() 方法接受一个 Promise 对象数组作为参数,用于并行执行多个异步操作,并在所有异步操作完成后返回一个 Promise 对象。如果任意一个异步操作失败,那么 Promise.all() 方法就会立即返回一个 rejected 状态的 Promise 对象。

Promise.all() 方法的使用方法如下:

const promises = [promise1, promise2, promise3];

Promise.all(promises).then((results) => {
  // 所有异步操作都成功完成
}).catch((error) => {
  // 任意一个异步操作失败
});

Promise.race()

Promise.race() 方法接受一个 Promise 对象数组作为参数,用于并行执行多个异步操作,并在任意一个异步操作完成后返回一个 Promise 对象。如果任意一个异步操作失败,那么 Promise.race() 方法就会立即返回一个 rejected 状态的 Promise 对象。

Promise.race() 方法的使用方法如下:

const promises = [promise1, promise2, promise3];

Promise.race(promises).then((result) => {
  // 任意一个异步操作完成
}).catch((error) => {
  // 任意一个异步操作失败
});

Promise.finally()

Promise.finally() 方法在 Promise 对象 settled(已解决)时调用,无论 Promise 对象的状态是 resolved 还是 rejected,都会执行 finally() 方法中的回调函数。

Promise.finally() 方法的使用方法如下:

promise.then((result) => {
  // 异步操作成功
}).catch((error) => {
  // 异步操作失败
}).finally(() => {
  // 无论异步操作成功还是失败,都会执行这个回调函数
});

Promise.try()

Promise.try() 方法用于捕获同步或异步函数中的错误,并将错误封装在一个 rejected 状态的 Promise 对象中返回。

Promise.try() 方法的使用方法如下:

Promise.try(() => {
  // 同步或异步操作
}).then((result) => {
  // 异步操作成功
}).catch((error) => {
  // 异步操作失败
});

总结

Promise 对象是 JavaScript 中用于异步编程的一种解决方案,它可以让我们更优雅的处理异步操作,避免回调地狱的情况出现。ES6 中引入了 Promise 对象,ES7、ES8、ES9 中也对其进行了一些升级和扩展。我们需要清楚地了解 Promise 的基本使用方法和执行顺序,才能更好地使用它。同时,我们还可以使用 Promise.all()、Promise.race()、Promise.finally() 和 Promise.try() 等方法来更好地处理异步操作。

来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/65bf4b5aadd4f0e0ff8d549b