在前端开发中，我们经常需要进行异步操作，比如异步获取数据、异步加载资源等等。而异步操作的执行是非常快的，不会等待操作完成才执行下一步操作，这会导致代码执行的顺序出现问题，影响到应用程序的正确性。因此，我们需要对异步操作的顺序进行控制，确保它们按照我们期望的顺序执行。在这种情况下，Promise 是一个非常有用的工具，它可以帮助我们实现异步操作顺序控制。
什么是 Promise？
Promise 是 JavaScript 中的一个异步编程解决方案，它由三个状态（pending、fulfilled、rejected）组成，并具有链式调用的特性。Promise 把异步操作包装成一个对象，可以通过链式调用的方式获得异步操作结果或者异常，实现代码的可读性和简洁性。
下面是一个简单的 Promise 示例：
// javascriptcn.com 代码示例
let p = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("Hello World!");
}, 1000);
});
p.then((result) => {
console.log(result); // "Hello World!"
});代码中，我们通过 Promise 对象包装了一个异步操作（这里是一个 setTimeout），当这个异步操作完成后，Promise 对象的状态将变为 resolved，然后可以通过 Promise 的 then 方法获取到这个异步操作的结果。
Promise 异步操作的顺序控制
在 Promise 的基础上，我们可以很容易地实现异步操作的顺序控制。有三种比较常见的实现方式。
方法一：then 方法链式调用
我们可以通过 then 方法的链式调用，把多个异步操作串起来：
// javascriptcn.com 代码示例
let p1 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("Hello World!");
}, 1000);
});
let p2 = p1.then((result) => {
console.log(result); // "Hello World!"
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve("Hello Promise!");
}, 1000);
});
});
p2.then((result) => {
console.log(result); // "Hello Promise!"
});代码中，我们定义了两个 Promise 对象，通过 then 方法的链式调用，实现了两个异步操作的顺序控制。p1 返回的 Promise 对象的结果将作为 p2 的输入，然后执行 p2 里定义的异步操作。最终，Promise p2 的结果将作为 then 方法的回调函数的输入值，并打印出来。
方法二：async/await
在 ECMAScript 2017 中，我们可以使用 async/await 语法来实现 Promise 异步操作的顺序控制，使得代码更加简洁易读。
// javascriptcn.com 代码示例
async function asyncFunc() {
let p1 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("Hello World!");
}, 1000);
});
let result1 = await p1;
console.log(result1); // "Hello World!"
let p2 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("Hello Promise!");
}, 1000);
});
let result2 = await p2;
console.log(result2); // "Hello Promise!"
}
asyncFunc();代码中，我们通过 async/await 语法，让我们在异步操作完成之后才执行下一个异步操作。使用 async/await 语法可以大大简化代码的嵌套和逻辑，提高代码的可读性和可维护性。
方法三：Promise.all()
有时候，我们需要执行多个异步操作，并在它们全部完成后才进行下一步操作。这时，我们可以使用 Promise.all() 方法把所有的异步操作打包成一个 Promise 对象，等所有异步操作完成后再执行下一步操作。
// javascriptcn.com 代码示例
let p1 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("Hello World!");
}, 1000);
});
let p2 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("Hello Promise!");
}, 2000);
});
Promise.all([p1, p2]).then((results) => {
console.log(results); // ["Hello World!", "Hello Promise!"]
});代码中，我们把两个 Promise 对象用数组封装成一个新的 Promise 对象，等数组里的所有 Promise 对象都成功返回时，Promise.all() 方法生成的新的 Promise 对象才会 resolve。在 then 方法里，我们可以拿到数组里每个 Promise 对象 resolve 的结果，进行下一步操作。
总结
Promise 是 JavaScript 中的一个异步编程解决方案，可以帮助我们实现异步操作的顺序控制。在实际开发中，我们可以根据实际需求选择以上提到的三种实现方式，实现异步操作的顺序控制，从而提高代码的可读性、可维护性和可复用性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6535c97c7d4982a6ebd5de90