随着 Web 应用的日益普及，前端异步编程变得越来越重要。在过去，前端异步编程使用回调函数来解决。然而，回调函数容易导致“回调地狱”，代码难以维护。ES6 引入了 Promise 对象来解决这个问题。在 ES7 中，Promise 进一步得到了改进，成为了前端异步编程的解决方案。
Promise 模型
Promise 是一种异步编程模型，表示异步操作的最终完成（或失败），并提供处理异步操作后续结果的方法。Promise 一般有三种状态：pending（进行中）、fulfilled（已成功） 和 rejected（已失败）。一旦 Promise 对象的状态转变，就无法再次改变。
Promise 的基本用法
ES6 中 Promise 的基本用法为：
// javascriptcn.com 代码示例
const promise = new Promise((resolve, reject) => {
if (/* 异步操作成功 */) {
resolve(value);
} else {
reject(error);
}
});
promise.then(
result => {
/* 处理 resolve 的结果 */
},
error => {
/* 处理 reject 的结果 */
}
);这里的 resolve 和 reject 是 Promise 的两个参数，表示异步操作完成的结果（成功或失败）。then 方法接受两个参数，第一个参数是成功时的回调函数，第二个参数是失败时的回调函数。
ES7 中加入了 async 和 await 关键字，可以进一步简化 Promise 的代码：
async function test() {
try {
const result = await promise;
/* 处理 resolve 的结果 */
} catch (error) {
/* 处理 reject 的结果 */
}
}Promise.all() 方法
有时我们需要同时执行多个异步操作，等待这些操作全部完成后再进行后续操作，这时 Promise.all() 方法就非常有用。Promise.all() 接受一个 Promise 数组作为参数，返回一个新的 Promise。等待所有 Promise 全部完成后，返回一个由所有 Promise 的结果组成的数组，顺序与传入的 Promise 数组顺序一致。
// javascriptcn.com 代码示例
const promise1 = Promise.resolve(1);
const promise2 = Promise.resolve(2);
const promise3 = Promise.resolve(3);
Promise.all([promise1, promise2, promise3])
.then(result => {
/* 所有 Promise 均成功后的结果 */
})
.catch(error => {
/* 任何一个 Promise 失败就会走到这里 */
});Promise.race() 方法
另一个常用的方法是 Promise.race()，它接受一个 Promise 数组作为参数，返回一个新的 Promise。不同于 Promise.all()，只要有一个 Promise 成功或失败，就会立即返回该 Promise 的结果。
// javascriptcn.com 代码示例
const promise1 = new Promise((resolve, reject) => {
setTimeout(() => resolve('第一个 Promise 完成'), 1000);
});
const promise2 = new Promise((resolve, reject) => {
setTimeout(() => resolve('第二个 Promise 完成'), 500);
});
Promise.race([promise1, promise2])
.then(result => {
/* 首先完成的 Promise 的结果 */
})
.catch(error => {
/* 首先失败的 Promise 的结果 */
});async/await
ES7 引入了 async/await 关键字。async 表示该函数返回一个 Promise 对象，await 表示等待这个异步操作的返回结果。async/await 可以大大简化异步编程的代码，让代码更易读易维护。
// javascriptcn.com 代码示例
async function getData() {
try {
const result1 = await fetch('url1');
const result2 = await fetch('url2');
return [result1, result2];
} catch (error) {
console.error(error);
}
}总结
ES7 的 Promise 为前端异步编程提供了强大的解决方案。Promise 模型、Promise.all() 方法、Promise.race() 方法和 async/await 关键字都极大地简化了前端异步编程的代码。但是在实际使用中，需要根据具体的场景选择不同的方法。了解 Promise 的基本用法和高级用法，可以让我们更好地掌握前端异步编程的技巧，写出更加易读易维护的代码。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/654448017d4982a6ebe2984d