在日常的前端开发中，我们经常会遇到异步编程的需求，例如获取远程数据或执行耗时操作。而在 ES6（ECMAScript 2015）中，Promise 作为新的语言特性，为我们提供了一种更加优雅且易于理解的异步编程方式。本文将从 0 开始，介绍 ES6 中 Promise 的概念、应用以及与传统回调方法之间的差异。
Promise 是什么？
Promise 是一种异步编程的解决方案，它可以将一个异步过程封装成一个 Promise 对象，从而提供对异步操作的更好控制和处理。Promise 对象可以处于以下 3 种状态之一：
pending（等待态）：初始状态，表示异步操作尚未完成。fulfilled（成功态）：表示异步操作已经成功完成，并返回了一个结果。rejected（失败态）：表示异步操作失败或者出现异常，返回失败的原因。
Promise 的状态只能从 pending 变到 fulfilled 或者从 pending 变到 rejected，并且状态一旦确定就不能再次改变。
Promise 的优点
- 避免了多重嵌套的回调函数，提高了代码的可读性和可维护性。
- 可以将异步操作的结果返回给调用者，而不需要通过回调函数传递。
- 可以轻松实现多个异步操作的组合，更好地处理异步任务的并行和串行执行。
Promise 的使用
创建 Promise 对象
要创建一个 Promise 对象，可以使用 new Promise() 方法。该方法需要传入一个函数作为参数，这个函数接收两个参数：resolve 和 reject。其中，resolve 用来将 Promise 对象的状态从 pending 变为 fulfilled，而 reject 则用来将状态从 pending 变为 rejected。下面是一个简单的例子：
-- -------------------- ---- -------
----- - - --- ----------------- ------- -- -
------------- -- -
-- -------------- - ---- -
-------------------
- ---- -
------------------
-
-- ------
---这段代码创建了一个 Promise 对象 p，它会在 1 秒钟之后以 50% 的概率变成 fulfilled 状态，返回 'success'，或者变成 rejected 状态，返回 'failure'。
Promise 的方法
Promise 提供了一些实用的方法，可以方便地处理异步操作。下面列举了其中的一些常用方法：
then()
该方法需要传入两个函数作为参数：第一个函数用来处理成功（fulfilled）状态的结果，第二个函数用来处理失败（rejected）状态的结果。使用 then() 方法可以让我们在箭头函数中分别处理不同状态下的结果，代码更加清晰：
p.then(
(result) => {
console.log(result); // 'success'
},
(error) => {
console.error(error); // 'failure'
}
);catch()
该方法用来处理 rejected 状态的结果，相当于是 then() 方法的第二个参数。它可以在链式调用中使用，捕获之前所有 then() 方法中出现的错误：
p.then((result) => console.log(result)) .catch((error) => console.error(error));
finally()
该方法会在无论 Promise 对象最终状态如何都会执行，用于统一执行一些清理操作或者转换操作：
p.then((result) => console.log(result))
.catch((error) => console.error(error))
.finally(() => console.log('done'));该方法也可以在链式调用中使用，没有参数，只是在最后执行。
Promise 的应用
Promise.all()
该方法接收一个 Promise 数组作为参数，返回一个新的 Promise 对象。只有当所有 Promise 对象都变成 fulfilled 状态时，该 Promise 对象才会变成 fulfilled 状态。如果有任何一个 Promise 对象变成了 rejected 状态，则该 Promise 对象立即变成 rejected 状态。下面是一个例子：
const p1 = Promise.resolve(1);
const p2 = Promise.resolve(2);
const p3 = Promise.reject('error');
Promise.all([p1, p2, p3])
.then((result) => console.log(result))
.catch((error) => console.error(error)); // error在该例子中，p1 和 p2 均为成功状态，而 p3 是失败状态，因此 Promise.all() 的结果是一个失败的 Promise 对象，返回 "error"。
Promise.race()
该方法接收一个 Promise 数组作为参数，返回一个新的 Promise 对象。只要有一个 Promise 对象变成 fulfilled 或 rejected 状态，该 Promise 对象就会变成对应的状态，并返回对应的结果。下面是一个例子：
const p1 = new Promise((resolve) => setTimeout(resolve, 1000, 'a')); const p2 = new Promise((resolve) => setTimeout(resolve, 500, 'b')); Promise.race([p1, p2]).then((result) => console.log(result)); // 'b'
在该例子中，p1 和 p2 都会返回相应的结果，但是 p2 的返回时间更短，因此 Promise.race() 的结果是 'b'。
Promise 与传统回调的比较
相比较传统的回调方式，Promise 有着更加优雅、易于理解的语法，可以有效地减少回调嵌套的问题。下面是一个传统回调方式的示例代码：
getUser(function (user) {
getOrders(user.id, function (orders) {
getProducts(orders.id, function (products) {
render(products);
});
});
});这种方式很快就会产生代码嵌套的问题，使得代码难以维护。而使用 Promise，则可以轻松地解决嵌套问题，代码更加清晰：
getUser() .then(getOrders) .then(getProducts) .then(render) .catch((error) => console.error(error));
总结
Promise 是一种非常优秀的异步编程方式，在 ES6 中被广泛应用。它可以解决传统回调方式中出现的代码嵌套、错误处理等问题，使得代码可读性和可维护性大幅提升。在应用 Promise 的过程中，应当注意 Promise 链式调用时的状态传递、错误处理等问题，保证 Promise 的正常使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64aa14ee48841e9894643a3e