ES6异步方案之Promise详解
一、Promise基本流程
1、Promise的实例对象有三个状态
pending: 初始状态,既不是成功,也不是失败状态。
fulfilled: 意味着操作成功完成。
rejected: 意味着操作失败
2、状态机机制
promise状态机制
- executor的resolve参数被调用时会将promise的状态从pending改为fulfilled
- executor的reject参数被调用时会将promise的状态从pending改为rejected
- 如果在executor函数中抛出一个错误,那么该promise 状态为rejected
3、Promise.prototype.then
当promise对象的状态发生改变时,绑定在其身上的then方法就会被调用。
then方法包含两个参数:onfulfilled函数 和 onrejected函数,它们都是 Function 类型。
当Promise状态为fulfilled时,调用 then 的 onfulfilled 方法;
当Promise状态为rejected时,调用 then 的 onrejected 方法.
所以在异步操作的完成和绑定处理方法之间不存在竞争。
then() 方法返回一个 Promise 。
4、then
语法:
p.then(onFulfilled, onRejected);
p.then(function(value) {// fulfillment}, function(reason) {// rejection});
参数 onFulfilled
:
当Promise变成接受状态时,该参数作为回调函数被调用。该函数有一个参数,即接受的最终结果。由executor中resolve的第一个参数提供 onRejected
当Promise变成拒绝状态(rejection )时,该参数作为回调函数被调用该函数有一个参数,,即拒绝的原因。由executor中reject的第一个参数提供。或系统提供的报错信息。
返回值(前3个不用):
then方法返回一个新的Promise,而它的行为与then中的回调函数的返回值有关:
1)如果then中的回调函数返回一个值,那么then返回的Promise将会成为接受状态,并且将返回的值作为接受状态的回调函数的参数值。
2)如果then中的回调函数抛出一个错误,那么then返回的Promise将会成为拒绝状态,并且将抛出的错误作为拒绝状态的回调函数的参数值。
3)如果then中的回调函数返回一个已经是接受状态的Promise,那么then返回的Promise也会成为接受状态,并且将那个Promise的接受状态的回调函数的参数值作为该被返回的Promise的接受状态回调函数的参数值。
4)如果then中的回调函数返回一个已经是拒绝状态的Promise,那么then返回的Promise也会成为拒绝状态,并且将那个Promise的拒绝状态的回调函数的参数值作为该被返回的Promise的拒绝状态回调函数的参数值。
5)如果then中的回调函数返回一个未定状态(pending)的Promise,那么then返回Promise的状态也是未定的,并且它的终态与那个Promise的终态相同;同时,它变为终态时调用的回调函数参数与那个Promise变为终态时的回调函数的参数是相同的。
二、Promise链式调用
Promise.prototype.then方法反回的也是一个promise对象。所以我们可以进行链式调用。
三、数据传递
参数传递如下:
1、resolve() 只能接受并处理一个参数,多余的参数会被忽略掉。
2、Resolve() 单个参数,多个参数
参数传递代码:
<script>
/*Promise异步处理:用同步的编码方式处理异步代码 可以解决回调地狱 有利于业务逻辑的梳理
优点:传递数据方便
缺点:没有摆脱回调*/
// 数据传递
var promise = new Promise(function (resolve, reject) {
setTimeout(function (flag) {
if (flag) {
console.log("success-1");
resolve(flag);
} else {
console.log("error-1");
reject();
}
}, 1000, true)
});
promise
.then(function (data) {
return new Promise(function (resolve, reject) {
setTimeout(function (flag) {
if (flag) {
console.log("success-2");
resolve(flag);
} else {
console.log("error-2");
reject();
}
}, 1000, data)
})
})
.then(function (data) {
return new Promise(function () {
setTimeout(function (flag) {
if (flag) {
console.log("success-3");
} else {
console.log("error-3");
}
}, 1000, data)
})
});
</script>
四、优缺点
优点:数据传递 清晰
缺点:没有摆脱回调