一、什么是异步
异步（Asynchronous, async）是与同步（Synchronous, sync）相对的概念。总所周知，JavaScript 的代码执行的时候是跑在单线程上的，代码按照出现的顺序，从上到下一行一行的执行，也就是我们说的同步(同步不意味着所有步骤同时运行，而是指步骤在一个控制流序列中按顺序执行)。而异步的概念则是不保证同步的概念，也就是说，一个异步过程的执行将不再与原有的序列有顺序关系。
简单来理解就是：同步按你的代码顺序执行，异步不按照代码顺序执行，异步的执行效率更高。
实际开发中，某些业务的结果我们是不能同步获取的，而等待的结果也是不确定的。比如异步操作 ajax 获取数据，遍历一个大型的数组(同步操作)，还有动态加载脚本文件然后初始化相关业务。
function loadScript(src) {
let script = document.createElement("script");
script.src = src;
document.head.append(script);
}
loadScript("./js/script.js");
init(); // 定义在 ./js/script.js 里的函数
这样的代码肯定是达不到效果的。因为加载脚本是需要花时间的，是一个异步的行为，浏览器执行 JavaScript 的时候并不会等到脚本加载完成的时候再去调用 init 函数。
远古时代的做法是使用回调函数，给处理函数传递一个回调函数来处理回调结果。
function loadScript(src, success, fail) {
let script = document.createElement("script");
script.src = src;
script.onload = success;
script.onerror = fail;
document.head.append(script);
}
loadScript("./js/script.js", success, fail);
function success() {
console.log("success");
init(); // 定义在 ./js/script.js 中的函数
}
function fail() {
console.log("fail");
}
试想一下，如果 success 函数又需要异步处理回调呢？OMG，那简直就是灾难，传说中的"回调地狱"青面獠牙向我们走来，它是恶魔，即使是聪明绝顶的程序猿都避而远之。
为了避免"回调地狱"吞噬程序猿茂密的毛发，Promise解决方案就应运而生了。
二、Promise
Promise，是用来处理异步操作的，可以让我们写异步调用的时候写起来更加优雅，更加美观，人称“护发金刚”。顾名思义为承诺、许诺的意思，意思是使用了 Promise 之后他肯定会给我们答复，无论成功或者失败都会给我们一个答复。
我们可以把异步操作交给 Promise 来处理，什么时候处理好他通知我们，如果还有异步操作再交给 Promise 处理，这样就可以将异步的操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。此外，Promise 对象提供统一的接口，使得控制异步操作更加容易。
俗话说，神仙也有缺点。当然 Promise 也不例外。首先，无法取消 Promise，一旦新建它就会立即执行，无法中途取消。其次，如果不设置回调函数，Promise 内部抛出的错误，不会反应到外部。第三，当处于 Pending 状态时，无法得知目前进展到哪一个阶段(刚刚开始还是即将完成)。
纵使她有这些缺点，但丝毫影响我们对他的欢喜，甚至有些猿友对她爱得死去活来的。
Promise 首先是一个对象，它通常用于描述现在开始执行，一段时间后才能获得结果的行为（异步行为），内部保存了该异步行为的结果。然后，它还是一个有状态的对象：
- pending：待定
- fulfilled：兑现，有时候也叫解决（resolved）
- rejected：拒绝
一个 Promise 只有这 3 种状态，且状态的转换过程有且仅有 2 种：
- pending 到 fulfilled
- pending 到 rejected
三个属性，两个技能，她就是"回调地狱"的克星，程序猿的知音啊。
创建 Promise
调用 Promise 构造函数来创建一个 Promise。
let promise = new Promise((resolve, reject) => {});
Promise 构造函数接收一个函数作为参数，该函数的两个参数是 resolve，reject，它们由 JavaScript 引擎提供。
其中 resolve 函数的作用是当 Promise 对象转移到成功，调用 resolve 并将操作结果作为其参数传递出去；reject 函数的作用是当 Promise 对象的状态变为失败时，将操作报出的错误作为其参数传递出去。
由 new Promise 构造器返回的 Promise 对象具有如下内部属性：
- PromiseState：最初是 pending，resolve 被调用的时候变为 fulfilled，或者 reject 被调用时会变为 rejected。
- PromiseResult：最初是 undefined，resolve(value) 被调用时变为 value，或者在 reject(error) 被调用时变为 error。
三、Promise 常用方法
Promise.prototype.then()
调用 then 可以为实例注册两种状态的回调函数，当实例的状态为 fulfilled，会触发第一个函数执行,当实例的状态为 rejected，则触发第二个函数执行。
- onResolved：状态由 pending 转换成 fulfilled 时执行。
- onRejected：状态由 pending 转换成 rejected 时执行。
function onResolved(res) {
console.log("resolved" + res); // resolved3
}
function onRejected(err) {
console.log("rejected" + err);
}
new Promise((resolve, reject) => {
resolve(5);
}).then(onResolved, onRejected);
Promise.prototype.catch()
catch 只接受一个参数，也就是 rejected 抛出的值，一般用于异常处理。传统的try/catch捕获不了Promise内部的异常的，因为抛出异常这个动作是异步的。
在处理异常的时候，我们可以在catch中进行异常的捕获，也可以直接抛出异常。
function onRejected(err) {}
new Promise((resolve, reject) => {
reject();
}).catch(onRejected);
Promise.prototype.finally()
finally()方法只有当状态变化的时候才会执行，可以用来做一些程序的收尾工作，比如操作文件的时候关闭文件流。
function onFinally() {
console.log(12345); // 并不会执行
}
new Promise((resolve, reject) => {}).finally(onFinally);
all()
Promise 的 all 方法提供了并行执行异步操作的能力，在 all 中所有异步操作结束后才执行回调。
function p1() {
var promise1 = new Promise(function (resolve, reject) {
console.log("p1的第一条输出语句");
resolve("p1完成");
});
return promise1;
}
function p2() {
var promise2 = new Promise(function (resolve, reject) {
console.log("p2的第一条输出语句");
setTimeout(() => {
console.log("p2的第二条输出语句");
resolve("p2完成");
}, 2000);
});
return promise2;
}
function p3() {
var promise3 = new Promise(function (resolve, reject) {
console.log("p3的第一条输出语句");
resolve("p3完成");
});
return promise3;
}
Promise.all([p1(), p2(), p3()]).then(function (data) {
console.log(data);
});
输出结果：
p1的第一条输出语句;
p2的第一条输出语句;
p3的第一条输出语句;
p2的第二条输出语句[("p1完成", "p2完成", "p3完成")];
race()
在all中的回调函数中，等到所有的Promise都执行完，再来执行回调函数，race则不同它等到第一个Promise改变状态就开始执行回调函数。将上面的all改为race。
function p1(){
var promise1 = new Promise(function(resolve,reject){
console.log("p1的第一条输出语句");
resolve("p1完成");
})
return promise1;
}
function p2(){
var promise2 = new Promise(function(resolve,reject){
console.log("p2的第一条输出语句");
setTimeout(() => {
resolve("p2完成");
}, 2000);
})
return promise2;
}
function p3(){
var promise3 = new Promise(function(resolve,reject){
console.log("p3的第一条输出语句");
resolve("p3完成")
});
return promise3;
}
Promise.race([p1(),p2(),p3()]).then(function(data){
console.log(data);
})
结果：
p1的第一条输出语句
p2的第一条输出语句
p3的第一条输出语句
p1完成
p1完成返回后就不等p2，p3的返回了。
四、练习题
1、下面的代码输出什么？
new Promise((resolve, reject) => {
console.log('A')
resolve(3)
console.log('B')
}).then(res => {
console.log('C')
})
console.log('D')
// 打印结果：A B D C
上面这串代码的输出顺序是：A B D C。
解答
我们知道，立即执行函数会在 new Promise 调用的时候同步执行。所以为先打印出AB，然后遇到resolve(3)时onResolved函数会被推入微任务队列，然后就打印D，此时所有同步任务执行完成，浏览器会去检查微任务队列，发现存在一个，所以最后会去调用 onResolved 函数，打印出 C。
注意，执行 resolve()/reject()/finally()时都是异步的。
2、下面的代码输出什么？
new Promise((resolve, reject) => {
resolve(1)
}).then(res => {
console.log('A')
}).finally(() => {
console.log('B')
})
new Promise((resolve, reject) => {
resolve(2)
}).then(res => {
console.log('C')
}).finally(() => {
console.log('D')
})
// 打印结果：A C B D
上面这串代码的输出顺序是：A C B D。
解答
- 执行 resolve(1)，将处理程序 A 推入微任务队列 1；
- 执行 resolve(2)，将处理程序 C 推入微任务队列 2；
同步任务执行完成，执行微任务队列 1 里的内容，打印 A，A 所在函数执行完成后生成了一个 fulfilled 的新实例，由于新实例状态变化，所以会立即执行 finally() 处理程序 B 推入微任务队列 3； - 执行微任务队列 2 的内容，打印 C，C 所在函数执行完成后，同上条原理会将处理程序 D 推入微任务队列 4；
- 执行微任务队列 3 的内容，打印 B；
- 执行微任务队列 4 的内容，打印 D；
- 代码全部执行完成，最终打印：A C B D。
最后
欢迎关注公众号【前端技术驿站】，回复5678获取最新前端实战视频
