ES6/ES7/ES8/ES9 中 Promise 对象详解

前言

Promise 是 JavaScript 中的一个重要概念，它是一种处理异步操作的方式。在 ES6/ES7/ES8/ES9 中，Promise 对象得到了进一步的完善和扩展，本文将对 Promise 对象进行详细介绍。

Promise 简介

Promise 是一种异步编程的解决方案，它可以将异步操作以同步操作的方式进行处理，从而避免了回调地狱（callback hell）的问题。Promise 对象有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。当 Promise 对象的状态发生改变时，会触发相应的回调函数。

Promise 的基本用法

Promise 对象的基本用法如下：

const promise = new Promise((resolve, reject) => {
  // 异步操作
  if (/* 异步操作成功 */) {
    resolve(result); // 将异步操作的结果传递给 then 方法的第一个回调函数
  } else {
    reject(error); // 将异步操作的错误传递给 then 方法的第二个回调函数
  }
});

promise.then(
  result => {
    // 异步操作成功的处理
  },
  error => {
    // 异步操作失败的处理
  }
);

Promise 的进阶用法

在 ES6 中，Promise 对象新增了一些方法，例如 all、race、finally 等，这些方法可以进一步方便地处理异步操作。

Promise.all

Promise.all 方法可以接收一个数组作为参数，数组中的每个元素都是一个 Promise 对象，它的作用是等待数组中所有的 Promise 对象都执行完毕后，再执行相应的回调函数。

const promise1 = new Promise(resolve => setTimeout(resolve, 1000, 'Promise 1'));
const promise2 = new Promise(resolve => setTimeout(resolve, 2000, 'Promise 2'));
const promise3 = new Promise(resolve => setTimeout(resolve, 3000, 'Promise 3'));

Promise.all([promise1, promise2, promise3]).then(
  results => {
    console.log(results); // ['Promise 1', 'Promise 2', 'Promise 3']
  },
  error => {
    console.log(error);
  }
);

Promise.race

Promise.race 方法也可以接收一个数组作为参数，数组中的每个元素都是一个 Promise 对象，它的作用是等待数组中任意一个 Promise 对象执行完毕后，就执行相应的回调函数。

const promise1 = new Promise(resolve => setTimeout(resolve, 1000, 'Promise 1'));
const promise2 = new Promise(resolve => setTimeout(resolve, 2000, 'Promise 2'));
const promise3 = new Promise(resolve => setTimeout(resolve, 3000, 'Promise 3'));

Promise.race([promise1, promise2, promise3]).then(
  result => {
    console.log(result); // 'Promise 1'
  },
  error => {
    console.log(error);
  }
);

Promise.finally

Promise.finally 方法可以在 Promise 对象执行完毕后，无论是成功还是失败，都会执行相应的回调函数。

const promise = new Promise((resolve, reject) => {
  // 异步操作
  if (/* 异步操作成功 */) {
    resolve(result);
  } else {
    reject(error);
  }
});

promise.then(
  result => {
    // 异步操作成功的处理
  },
  error => {
    // 异步操作失败的处理
  }
).finally(() => {
  // Promise 对象执行完毕后的处理
});

Promise 的扩展用法

在 ES7、ES8、ES9 中，Promise 对象又得到了进一步的扩展，例如 async/await、Promise.prototype.finally 等，这些扩展用法可以更加方便地进行异步操作。

async/await

async/await 是 ES7 中新增的一种异步编程方式，它可以让异步操作的代码看起来像同步操作的代码一样简洁易懂，async/await 实际上是基于 Promise 对象实现的。

async function test() {
  const result = await promise; // 等待异步操作完成后，获取异步操作的结果
  // 异步操作完成后的处理
}

Promise.prototype.finally

Promise.prototype.finally 方法可以在 Promise 对象执行完毕后，无论是成功还是失败，都会执行相应的回调函数，它是 ES9 中新增的一个方法。

promise.then(
  result => {
    // 异步操作成功的处理
  },
  error => {
    // 异步操作失败的处理
  }
).finally(() => {
  // Promise 对象执行完毕后的处理
});

总结

Promise 是 JavaScript 中的一个重要概念，它是一种处理异步操作的方式。在 ES6/ES7/ES8/ES9 中，Promise 对象得到了进一步的完善和扩展，例如 all、race、finally、async/await 等，这些方法可以更加方便地进行异步操作。在实际开发中，我们应该根据实际需求选择合适的方法进行异步编程。

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