一、为何会有Promise？
在JavaScript的世界中，所有代码都是单线程执行的。由于这个“缺陷”，导致JavaScript的所有网络操作，浏览器事件，都必须是异步执行。在Promise出现之前是通过回调函数(callback)实现异步, 简单说回调函数就是将一个方法func2作为参数传入另一个方法func1中，当func1执行到某一步或者满足某种条件的时候才执行传入的参数func2。
一般来说我们会碰到的回调嵌套都不会很多，一般就一到两级，但是某些情况下，回调嵌套很多时，代码就会非常繁琐，逻辑已经很难理清楚了，这种情况俗称——回调地狱。
多层嵌套的回调中，有同步/异步的方法，那么执行顺序会变得混乱，而Promise采用链式调用，使我们的代码更容易理解和维护，而且Promise还增加了许多有用的特性，让我们处理异步编程得心应手。如下面这个例子：
//回调函数写法：
step1(function (value1) {
step2(value1, function(value2) {
step3(value2, function(value3) {
step4(value3, function(value4) {
// ...
});
});
});
});
//Promise的写法：
(new Promise(step1))
.then(step2)
.then(step3)
.then(step4);
二、什么是Promise？
- Promise由社区最早提出和实现，ES6将其写进了语言标准，统一了语法，原生提供了Promise。
- Promise是抽象异步处理对象以及对其进行各种操作的组件。Promise就是一个容器，里面保存着某个未来才会结束的事件(通常是一个异步操作）的结果。
- Promise就如它的意思“承诺”一样，既然执行了，就不管程序运行结果成功还是失败，最终都会给一个答复，而这个答复就是一个Promise对象。执行流程如下图：
可能上面的阐述还是不够直观易懂，那么可参考知乎上的用“定外卖”来举的这个例子：十五行代码带你搞懂Promise
Promise对象有三种状态：
1、异步操作"未完成"（pending）
2、异步操作"已完成" (resolved)
3、异步操作"失败" (rejected)
这三种状态的变化途径：
1、异步操作从"未完成"到"已完成"
2、异步操作从"未完成“到"失败"
Promise对象的最终结果：
1、异步操作成功 Promise对象传回一个值，状态变为resolved
2、异步操作失败 Promise对象抛出一个错误，状态变为rejected
注意：有且只有这2种结果，并且状态一旦改变，就无法再次改变状态，这也是它名字“承诺”的由来。
三、基本用法
1、先声明一个Promise对象，生成Promise实例。
let p = new Promise((resolve, reject) => {
// ...
if (/* 异步操作成功 */){
resolve(value);//成功抛出value
} else {
reject(error);//失败抛出错误
}
});
2、Promise实例生成以后，可以用then方法分别指定resolved状态和reject状态的回调函数。
p.then((value) => {
// 成功执行
}, (error) => {
// 失败执行 --->可选
});
注意：实例化的Promise对象会立即执行
现在我们可以开始写一个简单的例子，比如随机生成一个数，1秒后判断可不可以做除数（0不能做除数），代码如下：
let p = new Promise((resolve, reject) => {
var divisor = Math.random();
setTimeout(() => {
if(divisor) {
resolve('可以做除数~');
}
else {
reject('不可以做除数~');
}
}, 1000);
});
console.log(p); // 在浏览器的控制台运行的话，它返回的是一个包含了许多属性的Promise对象
p.then((result) => {
console.log(result);
}, (err) => {
console.log(err);
}); // 1s后这里的输出可能是fail也可能是success
四、常见方法
1、Promise.then()
promise.then(
() => { console.log('this is success callback') },
() => { console.log('this is fail callback') }
)
.then()方法是Promise原型链上的方法，它包含两个参数方法，分别是已成功resolved的回调和已失败rejected的回调。
2、Promise.catch()
promise.then(
() => { console.log('this is success callback') }
).catch(
(err) => { console.log(err) }
)
.catch()的作用是捕获Promise的错误，与then()的rejected回调作用几乎一致。但是由于Promise的抛错具有冒泡性质，能够不断传递，这样就能够在下一个catch()中统一处理这些错误。
同时catch()也能够捕获then()中抛出的错误，所以建议不要使用then()的rejected回调，而是统一使用catch()来处理错误。
同样，catch()中也可以抛出错误，由于抛出的错误会在下一个catch中被捕获处理，因此可以再添加catch()。
3、Promise.all()
var promise = Promise.all( [p1, p2, p3] )
promise.then(
// ...
).catch(
// ...
)
当p1、p2、p3的状态都变成resolved时，promise才会变成resolved，并调用then()的已完成回调，但只要有一个变成rejected状态，promise就会立刻变成rejected状态。
4、Promise.race()
var promise = Promise.race( [p1, p2, p3] )
promise.then(
// ...
).catch(
// ...
)
race()方法，参数与Promise.all()相同，不同的是，参数中的p1、p2、p3只要有一个改变状态，promise就会立刻变成相同的状态并执行对于的回调。
5、Promise.done()
Promise.done()的用法类似.then() ，可以提供resolved和rejected方法，也可以不提供任何参数，它的主要作用是在回调链的尾端捕捉前面没有被.catch() 捕捉到的错误。
6、Promise.finally()
Promise. finally()接受一个方法作为参数，这个方法不管promise最终的状态是怎样，都一定会被执行。
五、缺点
说了这么多Promise的好用之处，那是不是堪称完美的呢？不是的，下面列举了它的几条缺点，也是我们在使用过程中需要注意的地方。
- 无法取消Promise，一旦新建它就会
立即执行，无法中途取消。 - 如果不设置回调函数，Promise内部抛出的错误，不会反应到外部。
- 当处于Pending状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）。
六、演变（async/await）
Promise让我们告别回调函数，写出更优雅的异步代码；在实践过程中，却发现Promise并不完美；技术进步是无止境的，这时，便有了async/await。
使用async/await，搭配promise，可以通过编写形似同步的代码来处理异步流程，提高代码的简洁性和可读性。
async
使用async function可以定义一个异步函数，不管在函数体内return了什么值，async函数的实际返回值总是一个Promise对象。
await
await操作符用于等待一个
Promise对象，它只能在异步函数async function内部使用。
需要注意的是，await表达式会暂停当前async function的执行，等待Promise处理完成。若Promise正常处理，其处理结果作为await表达式的值，继续执行async function；若Promise处理异常,await表达式会把Promise的异常原因抛出。
相信大家都已经在项目中使用过async/await语法了，那么我就不介绍它的用法了，直接说说需要注意哪些地方。
- 避免直接将await调用当作变量，例如：
// 错误写法
initData(await getData());
// 正确写法
const data = await getData();
initData(data);
// 错误写法
const obj = {
data: await getData()
}
// 正确写法
const data = await getData();
const obj = {
data
}
- await只能用于async声明的函数上下文中， 例如：
/* 场景：多个专题获取并处理报告内容 */
// 错误写法
async handleInited() {
this.reportData.map(v => {
const reportData = await this.handleReport(v.topicId);
return reportData;
});
},
// 正确写法
handleInited() {
this.reportData.map(async v => { // 从语法上来说，给map的callback加上async才可以运行
const reportData = await this.handleReport(v.topicId);
return reportData;
});
},
- 注意异步操作的依赖关系，避免滥用async/await，例如：
/* 场景：多个专题获取并处理报告内容 */
// 错误写法
handleInited() {
this.reportData.map(async v => {
const reportData = await this.handleReport(v.topicId);
return reportData;
});
this.showLoading = false; // 并不会等待上面代码返回结果后再执行
},
// 正确写法
async handleInited() {
Promise.all(this.reportData.map(v => {
return this.handleReport(v.topicId);
})).then(() => {
this.showLoading = false;
});
},
从上面的代码可以看出，我们是想要handleReport函数并行执行，等到都返回结果后再将showLoading置为false。如果使用async/await，显然不能达到我们想要的，await只会暂停map的callback，因此map完成时，不能保证handleReport也全部完成，这时使用之前提到的Promise.all()再合适不过了。
七、总结
JavaScript的异步编写方式，从回调函数到Promise再到async/await，表面上只是写法的变化，本质上则是语言层的一次次抽象，让我们可以用更简单的方式实现同样的功能，而不需要去考虑代码是如何执行的。
网友评论