前言
在 Web 前端开发中，异步编程是非常常见的。ES6 Promise 是一种可靠地解决 JavaScript 异步编程的方法，并经过了标准化的 Promise A+ 规范。这篇文章将会详细介绍 ES6 Promise，并为大家提供足够的样例代码来帮助大家更好地理解。
Promise 的基本概念
Promise 是一种代表异步操作最终完成或失败的对象。通俗地说，Promise 对象表示一个异步操作的最终完成，或者最终失败。可以使用 Promise.resolve(value) 或者 Promise.reject(reason) 来得到一个完成或失败的 Promise 对象。
Promise 有 3 个状态：
Pending（进行中）Fulfilled（已成功）Rejected（已失败）
当一个 Promise 从 Pending 状态转变成 Fulfilled 或 Rejected 时，就称为 Promise 被 settled。
Promise 的基本用法
// javascriptcn.com 代码示例
// 基本用法
const promise = new Promise((resolve, reject) => {
// 这里是异步操作的逻辑
// 如果异步操作成功
resolve(value);
// 如果异步操作失败
reject(reason);
});
promise.then(
(value) => {
// 成功回调
console.log(value);
},
(reason) => {
// 失败回调
console.log(reason);
}
);Promise 链式调用
Promise 链式调用可以让异步操作按顺序依次执行。
// javascriptcn.com 代码示例
const promise = new Promise((resolve, reject) => {
resolve(value1);
});
promise
.then((value) => {
console.log(value);
return value + value;
})
.then((value) => {
console.log(value);
return value + value;
})
.then((value) => {
console.log(value);
});在 Promise 链式调用中，每个 .then() 方法返回的都是 Promise 对象，所以可以使用 .then() 方法实现异步操作的串联或并联。
Promise 的常见操作
Promise.all()
Promise.all() 可以将多个 Promise 对象组合成一个新的 Promise 对象，这个新的 Promise 对象将在所有的 Promise 对象都已经成功被 settled 时，自动转化为 Fulfilled 状态。
const promise1 = Promise.resolve("Hello");
const promise2 = Promise.resolve("World");
const promise3 = Promise.resolve("!");
Promise.all([promise1, promise2, promise3]).then((values) => {
console.log(values); // [ 'Hello', 'World', '!' ]
});如果其中有任何一个 Promise 被 Reject，则整个 Promise.all() 被 Reject。
Promise.race()
Promise.race() 可以将多个 Promise 对象组合成一个新的 Promise 对象，这个新的 Promise 对象将在其中任意一个 Promise 对象被 settled 时，自动转化为 Fulfilled 或 Rejected 状态。
// javascriptcn.com 代码示例
const promise1 = new Promise((resolve, reject) =>
setTimeout(resolve, 500, "one")
);
const promise2 = new Promise((resolve, reject) =>
setTimeout(resolve, 100, "two")
);
Promise.race([promise1, promise2]).then((value) => {
console.log(value); // 'two'
});Promise.finally()
Promise.finally() 方法可以在 Promise 对象被 resolved 或 rejected 后，执行指定的回调函数。与 .then() 和 .catch() 不同，finally() 没有参数，只是在 Promise 对象对象完成后，执行回调函数。
// javascriptcn.com 代码示例
promise
.then((result) => {
return result;
})
.catch((error) => {
return error;
})
.finally(() => {
console.log("Promise completed.");
});总结
通过本文对 ES6 Promise 的详细介绍，我们学习到了 Promise 的基本概念、基本用法以及常见操作。掌握 Promise 非常重要，它可以使得异步编程更为流畅美妙。希望本文可以为大家学习 ES6 Promise 提供帮助并带来指导意义。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/653458327d4982a6eb899648