/**
* https://juejin.im/post/597724c26fb9a06bb75260e8#heading-7 学习笔记
* result是每个部分的result 放在一起的话 打印顺序是不同的
*/
//----------------------promise的立即执行性-----------------------
var p = new Promise(function(resolve,reject) {
console.log("create a promise");
resolve("success");
})
console.log(p)
console.log("after new promise");
p.then(function(value) {
console.log(value)
})
/*result:create a promise
after new promise
success
new promise的时候会立即执行，只是其中执行的可以是异步代码，当调用then时promise
接收的参数才会执行
在Promise的原型上有一个then方法，会在promise的executor(resolve或者reject)执行后根据不同情况执行
*/
//---------------------promise三种状态-----------------------
var p1= new Promise(function (resolve,reject) {
resolve(1);
})
var p2 = new Promise(function (resolve,reject) {
setTimeout(() => {
resolve(2);
}, 500);
})
var p3=new Promise(function (resolve,reject) {
setTimeout(() => {
reject(3);
}, 500);
})
console.log(p1);
console.log(p2);
console.log(p3);
setTimeout(() => {
console.log(p2)
}, 1000);
setTimeout(() => {
console.log(p3)
}, 1000);
p1.then(function (value) {
console.log(value);
})
p2.then(function (value) {
console.log(value)
})
p3.catch(function(error) {
console.log(error)
})
/*
result:Promise {[[PromiseStatus]]: "resolved", [[PromiseValue]]: 1}
Promise {[[PromiseStatus]]: "pending", [[PromiseValue]]: undefined} 我的执行value:2
Promise {[[PromiseStatus]]: "pending", [[PromiseValue]]: undefined} 我的执行value：3
1
2
3
Promise {[[PromiseStatus]]: "resolved", [[PromiseValue]]: 2}
Promise {[[PromiseStatus]]: "rejected", [[PromiseValue]]: 3}
解析：
promise有3种状态，刚刚创建完成时为pending，执行了resolve方法后由pending状态变为resolved状态，
如果执行的是reject方法，则由pending状态变为rejected状态。
new promise会立即执行里面的同步代码，所以p1的resolve被执行了，由pending状态
变为resloved状态，p2,p3里面的是异步代码所以需要等主线程同步代码执行完成后
再执行，因此状态仍为pending。
执行完3个console.log之后执行微任务p1.then,p2.then,p3.then 输出1,2,3
再执行宏任务settimeout p2,输出resloved 2
无微任务可执行则开始执行宏任务settimeout p3,输出rejected 3
*/
//------------------------promise状态的不可逆性----------------------------
var p4 = new Promise(function (resolve,reject) {
resolve("success1");
resolve("success2")
});
var p5 = new Promise(function (resolve,reject) {
resolve("success3");
reject("reject")
});
p4.then(function (value) {
console.log(value)
})
p5.then(function (value) {
console.log(value)
})
/** result：success1
* sucess3
* 解析：promise的状态一旦由pending变为resolved或者rejected之后，promise的状态和值
* 就固化下来了，无论你之后怎么调用resolve跟reject都不能改变它的状态和值
*/
//--------------------promise的链式调用-------------------------------
var p6= new Promise(function (resolve,reject) {
resolve("successp6")
})
var newp = p6.then(function (value) {
console.log(value)
})
console.log(newp)
/*result：Promise {[[PromiseStatus]]: "resolved", [[PromiseValue]]: undefined}
promise的then方法返回一个新的promise对象，因此可以通过链式调用then方法，then方法
接收2个函数作为参数，第一个参数是promise执行成功时的回调，第二个参数是promise执行
失败时的回调，两个函数只有1个会被调用，函数的返回值将被用作创建then返回的promise对象
这两个参数的返回值可以是以下三种情况中的一种：
1.return一个同步值或者undefined(当没有返回值时，默认返回undefined),then方法将返回
一个resolved状态的promise对象，其值为return的这个值
2.return一个promise,then方法将根据这个promise的状态和值创建一个新的promise对象返回
3.throw一个同步异常，then方法将返回一个rejected状态的promise，值是该异常
*/
var p7 = new Promise(function (resolve,reject) {
resolve(7)
});
p7.then(function(value){
console.log(value);
return value * 2;
}).then(function (value) {
console.log(value)
}).then(function(value) {
console.log(value);
return Promise.resolve("resolved")
}).then(function (value) {
console.log(value);
return Promise.reject("rejected")
}).then(function (value) {
console.log("resolve:"+value)
},function (err) {
console.log("rejected:"+err)
})
/*按照文章的结果一个得到
7
14
undefined
"resolve"
"reject: rejected"
然而我只有一个孤零零的7 ？？？？？？？？？？？？？？手动黑人问号 因为p7的resolve(7)写成了console.log(7) 手动敲打
*/
/**
* 解析：第一个then 打印出7 返回值为14 返回一个resolved状态值为14的promise对象
* 第二个then 打印出14 返回值undefined 返回一个resolved状态的值为undefined的promise对象
* 第三个then打印出undefined 返回值为一个新的promise 返回一个resolved状态值为resolved的promise对象
* 第四个then打印出resolved 返回值为一个新的promise 返回一个rejected状态值为rejected的promise对象
* 第五个then打印出rejected:rejected
*/
//--------------------------promise then的回调异步性--------------------
var p9 = new Promise(function (resolve,reject) {
resolve(9)
})
p9.then(value=> {
console.log(value)
})
console.log('这个应该是会比then先执行的')
/**
* result: 这个应该是会比then先执行的
* 9
* 解析：promise接收的函数参数是同步执行的，但是then方法中的回调函数的执行则是
* 异步的，因此9会在这个应该是会比then先执行的 之后输出，根据event loop
* 执行顺序既可得到这个结果
*/
//--------------------------promise中的异常----------------------------------
var p10 = new Promise(function (resolve,reject) {
foo.bar();
resolve(10)
})
p10.then(value =>{
console.log("p10 then value:"+value)
},err=> {
console.log("p10 then errro:"+err)
}).then(value =>{
console.log("p10 then then value:"+value)
},err=> {
console.log("p10 then then errro:"+err)
})
var p11 = new Promise(function (resolve, reject) {
resolve(11)
})
p11.then(value => {
console.log("p11 then value:" + value)
foo.bar();
}, err => {
console.log("p11 then errro:" + err)
}).then(value => {
console.log("p11 then then value:" + value)
}, err => {
console.log("p11 then then errro:" + err)
return 12
}).then(value => {
console.log("p11 then then then value:" + value)
}, err => {
console.log("p11 then then then errro:" + err)
return 12
})
/**
* p10 then error:foo.bar() is undefined
* p11 then value:11
* p10 then then value:undefined
* p11 then then error:foo.bao() is undefined
* p11 then then then value:12
*
* 解析：promise中的异常由then中的第二个参数处理，异常信息将作为promise的值，一旦异常得到处理，后续
* promise对象将恢复正常，并会被promise执行成功回调的函数处理
* ps：因为then回调的异步性，所以p10 跟p11的then交替执行
*/
//------------------------promise.resolve()------------------------------------
var p12 = Promise.resolve(1);
var p13 = Promise.resolve(p12);
var p14 = new Promise(function (resolve,reject) {
resolve(1)
});
var p15 = new Promise(function (resolve,reject) {
resolve(p12)
});
console.log("p12===p13:",p12===p13);
console.log("p12===p14:", p12 === p14);
console.log("p12===p15:", p12 === p15);
console.log("p14===p15:", p14 === p15);
p15.then(function (value) {
console.log("p15=",value)
})
p14.then(function (value) {
console.log("p14=", value)
})
p13.then(function (value) {
console.log("p13=", value)
})
/**
* result:
* p12===p13:true
* p12===p14:false
* p12===p15:false
* p14===p15:false
* p14=1
* p13=1
* p15=1
* 解析：promise.resolve(...)可以接收一个值或者promise对象作为参数，当为一个数值的时候，返回一个resolved状态值为这个数值
* 的promise对象，当参数位promise对象时，返回这个promise对象，因此p12===p13，但是通过new的方式创建的promise就是一个
* 新的promise对象了，所以后面都为false，虽然p15的then最先调用但是却最后打印，是因为p15的resolve中接收的是一个p12的
* promise对象，需要对p12进行“拆箱”，获取p12的状态和值，这个操作是异步的
*/
//-------------------------resolve vs reject------------------------
var p16 = new Promise(function (resolve,reject) {
resolve(Promise.resolve("resolve"))
});
var p17 = new Promise(function (resolve,reject) {
resolve(Promise.reject("reject"))
});
var p18 = new Promise(function (resolve,reject) {
reject(Promise.resolve("resolve"));
})
p16.then(value=>{
console.log("fulfilled:",value)
},err=>{
console.log("rejected:",err)
})
p17.then(value => {
console.log("fulfilled:", value)
}, err => {
console.log("rejected:", err)
})
p18.then(value => {
console.log("fulfilled:", value)
}, err => {
console.log("rejected:", err)
})
/**
* result:rejected:一个状态位resolve的promise对象
* fulfilled:resolve
* rejected:reject
* 解析：promise回调函数中的第一个参数resolve会对promise进行“拆箱”操作，即当resolve的参数是一个promise对象时，resolve会
* 拆箱获取这个promise的状态和值，但是这个过程是异步的。p16拆箱完成后获得promise对象状态为resolved，执行fulfilled,
* p17拆箱完成后获得promise对象的状态为rejected，进行rejected.
* promise回调函数的第二个参数reject不具备拆箱功能，reject的参数会直接传递给then方法的rejected回调，因此即使
* p18接收的是一个resolved状态的promise，也会执行then里面的rejected函数，参数就是这个resolved状态的promise
*/
//----------------------------------promise.all promise.race--------------
var p19 = new Promise(function (resolve,reject) {
setTimeout(()=>{
resolve({a:1})
})
})
var p20 = new Promise(function (resolve, reject) {
setTimeout(() => {
resolve({ b: 2 })
})
})
var p21 = new Promise(function (resolve, reject) {
setTimeout(() => {
resolve({ c: 3 })
})
})
Promise.all([p19,p20,p21]).then((data)=> {
console.log("data:",data)
},(err) =>{
console.log("rejected:",err)
})
Promise.race([p19, p20, p21]).then((data) => {
console.log("data:", data)
}, (err) => {
console.log("rejected:", err)
})
/**
* result: 全为resolve：data:[{a:1},{ b: 2 },{ c: 3 }]
* 解析：promise all是所有的promise resolve后再执行then的成功回调，如果有一个promise失败则直接走到then的失败回调
* p20为reject 则执行结果为rejected:{b:2}
*
* race的结果：data:{a:1}
* 解析：promise race是有一个promise resolve了就执行then的成功回调，如果第一个promise就失败了则直接走到then的失败回调
*/