在 JavaScript 开发中，异步编程是非常常见的操作。在以往，我们通常使用回调函数来处理异步操作，但是回调函数嵌套过多，代码可读性差，维护起来非常困难。于是，Promise 应运而生，它是一种处理异步操作的新的解决方案。
Promise 简介
Promise 是一种异步编程的解决方案，它将异步操作封装成一个对象，并提供一系列的方法，使得异步操作更加简单、直观、可读性更高。Promise 对象有三种状态，分别是 pending（进行中）、fulfilled（已成功）和 rejected（已失败）。当异步操作完成时，Promise 对象的状态会从 pending 变为 fulfilled 或 rejected。
Promise 的基本使用
创建 Promise 对象
我们可以通过 new Promise() 来创建一个 Promise 对象，它接收一个函数作为参数，这个函数会立即执行，我们称之为执行器函数。执行器函数接收两个参数，分别是 resolve 和 reject，这两个参数是函数类型，用于改变 Promise 对象的状态。
const promise = new Promise((resolve, reject) => {
// 异步操作
setTimeout(() => {
const data = 'Hello World!';
resolve(data); // 改变 Promise 对象的状态为 fulfilled
// reject('Error!'); // 改变 Promise 对象的状态为 rejected
}, 1000);
});Promise 的状态检测
我们可以通过 promise.then() 方法来监听 Promise 对象的状态变化，它接收两个函数作为参数，分别是成功时的回调函数和失败时的回调函数。
promise.then(
data => {
console.log(data); // 输出：Hello World!
},
error => {
console.log(error); // 输出：Error!
}
);Promise 的链式调用
我们可以通过 promise.then() 方法的返回值来进行链式调用，每次调用 then() 方法都会返回一个新的 Promise 对象。
promise
.then(data => {
console.log(data); // 输出：Hello World!
return 'Promise Chaining';
})
.then(data => {
console.log(data); // 输出：Promise Chaining
});Promise 的进阶使用
Promise.all()
Promise.all() 方法接收一个 Promise 对象数组作为参数，返回一个新的 Promise 对象。当数组中所有的 Promise 对象状态都变为 fulfilled 时，新的 Promise 对象的状态才会变为 fulfilled，返回一个包含所有 Promise 对象结果的数组。当数组中任意一个 Promise 对象状态变为 rejected 时，新的 Promise 对象的状态会变为 rejected。
// javascriptcn.com 代码示例
const promise1 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('Promise 1');
}, 1000);
});
const promise2 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('Promise 2');
}, 2000);
});
Promise.all([promise1, promise2]).then(data => {
console.log(data); // 输出：['Promise 1', 'Promise 2']
});Promise.race()
Promise.race() 方法接收一个 Promise 对象数组作为参数，返回一个新的 Promise 对象。当数组中任意一个 Promise 对象状态变为 fulfilled 或 rejected 时，新的 Promise 对象的状态会变为对应的状态。
// javascriptcn.com 代码示例
const promise1 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('Promise 1');
}, 1000);
});
const promise2 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('Promise 2');
}, 2000);
});
Promise.race([promise1, promise2]).then(data => {
console.log(data); // 输出：'Promise 1'
});Promise 的异常处理
我们可以在 promise.then() 方法中添加第二个参数，用于捕获异常。
promise.then(
data => {
console.log(data); // 输出：Hello World!
},
error => {
console.log(error); // 输出：Error!
}
);Promise 的错误传递
我们可以在 promise.catch() 方法中捕获错误，并将错误传递给下一个 promise.catch() 方法。
// javascriptcn.com 代码示例
promise
.then(data => {
console.log(data); // 输出：Hello World!
throw new Error('Error!');
})
.catch(error => {
console.log(error); // 输出：Error!
return 'Promise Error';
})
.then(data => {
console.log(data); // 输出：Promise Error
});总结
Promise 是一种处理异步操作的新的解决方案，它将异步操作封装成一个对象，并提供一系列的方法，使得异步操作更加简单、直观、可读性更高。JavaScript 工程师应该掌握 Promise 的基本使用和进阶使用，包括 Promise 的创建、状态检测、链式调用、异常处理、错误传递、Promise.all() 和 Promise.race() 等方法。掌握 Promise 可以提高代码质量，减少回调函数嵌套，使得代码更加优雅和易于维护。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6572d2dfd2f5e1655dbcca9a