Promise理解

#!/usr/bin/env node

 

const log = console.log;

 

 

// 1、立即执行性

// 创建（new）Promise时，作为Promise参数传入的函数是会被立即执行的，只是其中执行的代码可以是异步代码。

let p = new Promise((resolve, reject) => {
log("create a promise")
resolve("succ")
});

log("after a new promise")

p.then((value) => {
log(value)
})

// create a promise
// after a new promise
// succ

 

 

// 2、三总状态

// Promise有三种状态：pending，resolved，rejected。当Promise刚创建完成时，处于pending状态；当Promise中的函数参数执行了resolve后，Promise由pending状态变成resolved状态；如果在Promise的函数参数中执行的不是resolve方法，而是reject方法，那么Promise会由pending状态变成rejected状态。

let p1 = new Promise((resolve, reject) => {
resolve(1);
})

let p2 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve(2);
}, 1000)
})

let p3 = new Promise((resolve, reject) => {
 
setTimeout(() => {
reject(3);
}, 1000)
})

log(p1)
log(p2)
log(p3)
setTimeout(function(){
log(p2);
}, 2000);
setTimeout(function(){
log(p3);
}, 2000);

p1.then((val) => {
log(222)
log(val)
})
p2.then((val) => {
log(p2)
})

p3.catch((err) => {
console.log(err)
})

 

 

// 3、不可逆性

 

var p1 = new Promise((resolve, reject) => {
resolve("succ");
reject("fail");
})

p1.then(val => {
log(val)
log(p1)
})

// succ
// Promise { 'succ' }

 

 

// 4. 链式调用

 

var p1 = new Promise((resolve, reject) => {
resolve(1);
})

p1.then(val => {
log(val);
return val *2;
})
.then(val => {
log(val)
})
.then(val => {
log(val)
return Promise.resolve("resolve1");
})
.then(val => {
log(val)
return Promise.reject("reject1")
})
.then(val => {
log(`resolve: ${val}`)
}, err => {
log(`reject: ${err}`)
})

// 1
// 2
// undefined
// resolve1
// reject: reject1
// Promise对象的then方法返回一个新的Promise对象，因此可以通过链式调用then方法。then方法接收两个函数作为参数，第一个参数是Promise执行成功时的回调，第二个参数是Promise执行失败时的回调。两个函数只会有一个被调用，函数的返回值将被用作创建then返回的Promise对象。这两个参数的返回值可以是以下三种情况中的一种：

// return 一个同步的值 ，或者 undefined（当没有返回一个有效值时，默认返回undefined），then方法将返回一个resolved状态的Promise对象，Promise对象的值就是这个返回值。
// return 另一个 Promise，then方法将根据这个Promise的状态和值创建一个新的Promise对象返回。
// throw 一个同步异常，then方法将返回一个rejected状态的Promise, 值是该异常。

 

 

// 5.Promise then() 回调异步性

var p = new Promise(function(resolve, reject){
resolve("success");
});

p.then(val => {
log(val)
})

log("after")
// after
// success
// Promise接收的函数参数是同步执行的，但是then方法中的回调执行则是异步的，可以对比case1查看。

 

 

// 6.Promise 中的异常

 

var p = new Promise((resolve, reject) => {
 
resolve(1);
 
})

p.then(val => {
log(val)
}, err => {
log(err)
})

// ReferenceError: foo is not defined
// Promise中的异常由then参数中第二个回调函数（Promise执行失败的回调）处理，异常信息将作为Promise的值。异常一旦得到处理，then返回的后续Promise对象将恢复正常，并会被Promise执行成功的回调函数处理。

 

 

// 7.Promise.resolve()

 

var p1 = Promise.resolve( 1 );
var p2 = Promise.resolve( p1 );
var p3 = new Promise(function(resolve, reject){
resolve(1);
});
var p4 = new Promise(function(resolve, reject){
resolve(p1);
});

console.log(p1 === p2);
console.log(p1 === p3);
console.log(p1 === p4);
console.log(p3 === p4);
true
false
false
false
// Promise.resolve(...)可以接收一个值或者是一个Promise对象作为参数。当参数是普通值时，它返回一个resolved状态的Promise对象，对象的值就是这个参数；当参数是一个Promise对象时，它直接返回这个Promise参数。因此，p1 === p2。
//但通过new的方式创建的Promise对象都是一个新的对象，因此后面的三个比较结果都是false。

 

 

// 8.resolve vs reject

 

var p1 = new Promise(function(resolve, reject){
resolve(Promise.resolve('resolve'));
});
 
var p2 = new Promise(function(resolve, reject){
resolve(Promise.reject('reject'));
});
 
var p3 = new Promise(function(resolve, reject){
reject(Promise.resolve('resolve'));
});
 
p1.then(
function fulfilled(value){
console.log('fulfilled: ' + value);
},
function rejected(err){
console.log('rejected: ' + err);
}
);
 
p2.then(
function fulfilled(value){
console.log('fulfilled: ' + value);
},
function rejected(err){
console.log('rejected: ' + err);
}
);
 
p3.then(
function fulfilled(value){
console.log('fulfilled: ' + value);
},
function rejected(err){
console.log('rejected: ' + err);
}
);
// p3 rejected: [object Promise]
// p1 fulfilled: resolve
// p2 rejected: reject
// Promise回调函数中的第一个参数resolve，会对Promise执行"拆箱"动作。即当resolve的参数是一个Promise对象时，resolve会"拆箱"获取这个Promise对象的状态和值，但这个过程是异步的。p1"拆箱"后，获取到Promise对象的状态是resolved，因此fulfilled回调被执行；p2"拆箱"后，获取到Promise对象的状态是rejected，因此rejected回调被执行。但Promise回调函数中的第二个参数reject不具备”拆箱“的能力，reject的参数会直接传递给then方法中的rejected回调。因此，即使p3 reject接收了一个resolved状态的Promise，then方法中被调用的依然是rejected，并且参数就是reject接收到的Promise对象。

// 9.Promise.all在处理多个异步处理时非常有用，比如说一个页面上需要等两个或多个ajax的数据回来以后才正常显示，在此之前只显示loading图标。

let p1 = new Promise((resolve, reject) => {
  resolve('成功了')
})

let p2 = new Promise((resolve, reject) => {
  resolve('success')
})

let p3 = Promse.reject('失败')

Promise.all([p1, p2]).then((result) => {
  console.log(result)               //['成功了', 'success']
}).catch((error) => {
  console.log(error)
})

Promise.all([p1,p3,p2]).then((result) => {
  console.log(result)
}).catch((error) => {
  console.log(error)      // 失败了，打出 '失败'
})

 

//10. Promise.race

顾名思义，Promse.race就是赛跑的意思，意思就是说，Promise.race([p1, p2, p3])里面哪个结果获得的快，就返回那个结果，不管结果本身是成功状态还是失败状态。

 

let p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('success')
  },1000)
})

let p2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject('failed')
  }, 500)
})

Promise.race([p1, p2]).then((result) => {
  console.log(result)
}).catch((error) => {
  console.log(error)  // 打开的是 'failed'
})