學(xué)習(xí)Promise

jokester 發(fā)布于2019-08-20 18:32 / 2053人閱讀

摘要：另外，需要注意多級的回調(diào)函數(shù)是交替執(zhí)行的，這正是由回調(diào)的異步性決定的?？刂婆_輸出可以接收一個(gè)值或者是一個(gè)對象作為參數(shù)。但通過的方式創(chuàng)建的對象都是一個(gè)新的對象，因此后面的三個(gè)比較結(jié)果都是。

promise的立即執(zhí)行性

let p = new Promise(function(resolve, reject) {
    console.log("create a promise") //這時(shí)立即執(zhí)行的
    resolve("success")
}

console.log("after new promise")

p.then(function(value) {
    console.log(value)
})

執(zhí)行結(jié)果：

"create a promise"
"after new promise"
"success"

promise三種狀態(tài)

未完成態(tài)pending，完成態(tài)resolved，失敗態(tài)rejected

var p1 = new Promise(function(resolve,reject){
  resolve(1); //同步代碼，立即被調(diào)用了，狀態(tài)為完成態(tài)
});
var p2 = new Promise(function(resolve,reject){
  setTimeout(function(){
    resolve(2);  // 異步代碼，未被執(zhí)行，狀態(tài)為未完成態(tài)
  }, 500);      
});
var p3 = new Promise(function(resolve,reject){
  setTimeout(function(){
    reject(3);  // 異步代碼，未被執(zhí)行，狀態(tài)為未完成態(tài)
  }, 500);      
});

console.log(p1);
console.log(p2);
console.log(p3);
setTimeout(function(){
  console.log(p2); // 2，延遲執(zhí)行，此時(shí)p2和p3已被then()調(diào)用，狀態(tài)改變
}, 1000);
setTimeout(function(){
  console.log(p3); // 3
}, 1000); 

p1.then(function(value){
  console.log(value);
}); // 1
p2.then(function(value){
  console.log(value);
}); // 2
p3.catch(function(err){
  console.log(err);
}); // 3

執(zhí)行結(jié)果：

Promise { 1 } 
Promise {  }
Promise {  }
1
2
3
Promise { 2 }
Promise {  3 }

狀態(tài)的不可逆

let p =new Promise(function(resolve, reject) {
    resolve("success")
    resolve("success2")
    reject("reject")
})

p1.then(function(value) {
    console.log(value)
})

執(zhí)行結(jié)果：

"success"

Promise的狀態(tài)一旦變?yōu)閞esolved或者rejected時(shí)，狀態(tài)就固定下來了，后續(xù)的調(diào)用resolve或者reject方法都不會改變已有的狀態(tài)和值

鏈?zhǔn)秸{(diào)用

let p = new Promise(function(resolve, reject) {
    resolve(1)
})

p.then(function(value) {
    console.log(value) // 1
    return value * 2
}).then(function(value) {
    console.log(value) // 2
}).then(function(value) {
    console.log(value) // undefined
    return Promise.resolve("resolve") //返回resolved狀態(tài)的promise
}).then(function(value) {
    console.log(value) // "resolve"
    return Promise.reject("reject") // 返回rejected狀態(tài)的promise
}).then(function(value) {
    console.log("resolve" + value) // 接收成功態(tài)的value
}, function(err) {
    console.log("reject" + err) //接收失敗態(tài)的value reject reject
})

執(zhí)行結(jié)果：

1
2
undefined
"resolve"
"reject: reject"

then方法啊返回一個(gè)新的Promise對象，函數(shù)的返回值作為then返回的Promise對象

Promise中的異常

var p1 = new Promise( function(resolve,reject){
  foo.bar();
  resolve( 1 );      
});

p1.then(
  function(value){
    console.log("p1 then value: " + value);
  },
  function(err){
    console.log("p1 then err: " + err); // 異常捕獲
  }
).then(
  function(value){
    console.log("p1 then then value: "+value); // 之后被正確的函數(shù)調(diào)用
  },
  function(err){
    console.log("p1 then then err: " + err);
  }
);

var p2 = new Promise(function(resolve,reject){
  resolve( 2 );    
});

p2.then(
  function(value){
    console.log("p2 then value: " + value); // 執(zhí)行
    foo.bar();
  }, 
  function(err){
    console.log("p2 then err: " + err);
  }
).then(
  function(value){
    console.log("p2 then then value: " + value);
  },
  function(err){
    console.log("p2 then then err: " + err); // 異常捕獲
    return 1; // 返回1
  }
).then(
  function(value){
    console.log("p2 then then then value: " + value); // 之后被正確函數(shù)的調(diào)用
  },
  function(err){
    console.log("p2 then then then err: " + err);
  }
)

執(zhí)行結(jié)果：

p1 then err: ReferenceError: foo is not defined
p2 then value: 2
p1 then then value: undefined
p2 then then err: ReferenceError: foo is not defined
p2 then then then value: 1

異常一旦得到處理，then返回的后續(xù)Promise對象將恢復(fù)正常，并會被Promise執(zhí)行成功的回調(diào)函數(shù)處理。另外，需要注意p1、p2 多級then的回調(diào)函數(shù)是交替執(zhí)行的，這正是由Promise then回調(diào)的異步性決定的。

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);

p4.then(function(value){
  console.log("p4=" + value);
});

p2.then(function(value){
  console.log("p2=" + value);
})

p1.then(function(value){
  console.log("p1=" + value);
})

控制臺輸出：

true
false
false
false
p2=1
p1=1
p4=1

Promise.resolve(...)可以接收一個(gè)值或者是一個(gè)Promise對象作為參數(shù)。當(dāng)參數(shù)是普通值時(shí)，它返回一個(gè)resolved狀態(tài)的Promise對象，對象的值就是這個(gè)參數(shù)；當(dāng)參數(shù)是一個(gè)Promise對象時(shí)，它直接返回這個(gè)Promise參數(shù)。因此，p1 === p2。但通過new的方式創(chuàng)建的Promise對象都是一個(gè)新的對象，因此后面的三個(gè)比較結(jié)果都是false。另外，為什么p4的then最先調(diào)用，但在控制臺上是最后輸出結(jié)果的呢？因?yàn)閜4的resolve中接收的參數(shù)是一個(gè)Promise對象p1，resolve會對p1”拆箱“，獲取p1的狀態(tài)和值，但這個(gè)過程是異步的

拆箱的概念應(yīng)該是micro task和macro task吧？？？