Javascript基礎語法學習介紹6_es6_promise的使用筆記
Promise
代表一個async操作，主要是用來解決call-back函數地獄式嵌套問題(call back hell)
主要有三種狀態:pending(進行中) , resolved(已經成功) 和 rejected(已失敗)
一旦狀態改變就不會再變，任何時候都能獲取這結果。
Promise 本身就是一種object，因此我們可以直接去new它。
Promise物件的狀態改變只會有兩種結果
從pending變為resolved和從pending變為rejected
-> 成功(resolve)/失敗(reject)
-> 成功就決定去做這件事情
-> 失敗就放棄去做這件事情
//簡單寫法-直接new .ver1
new Promise(function(resolve,reject){
//resolve();//成功就決定去做這件事情,return 1
reject();//失敗就放棄去做這件事情,return 2
}).then(function(){
alert(1);
},function(){
alert(2);
});
//簡單寫法-直接new.ver2 ... catch
new Promise(function(resolve,reject){
//resolve();//成功就決定去做這件事情,return 1
reject();//失敗就放棄去做這件事情,return 2
}).then(function(){
alert(1);
}).catch(function(){
alert(2);
})
複雜寫法-實體化後用變數存.ver1
let promise = new Promise((resolve,reject) => {
....
})
promise.then(res => {
console.log('res => ' , res);
},err => {
console.log('err => ' , err);
})
複雜寫法-實體化後用變數存.ver2
let promise = new Promise((resolve,reject) => {
....
})
promise.then(res => {
console.log('res => ' , res);
}).catch(err => {
console.log('err => ' , err);
})
問題1:如果Promise裡面同時有resolve又有reject
它會執行哪一個呢?
答案:以最先出現的(執行的)為主
new Promise(function(resolve,reject){
resolve();//成功就決定去做這件事情,return 1
reject();//失敗就放棄去做這件事情,return 2
}).then(function(){
alert(1);
}).catch(function(){
alert(2);
})
問題2:如果我事情不想直接包在一個then的subruntime中
想拆分成多個then子block執行是否可以?
答案:當然，可以透過類似像jQuery的鏈式來達成
new Promise(function(resolve,reject){
resolve();//成功就決定去做這件事情,return 1
reject();//失敗就放棄去做這件事情,return 2
}).then(function(){
alert(1);
return 'abc';
}).then(function(v){
alert(v)
}).catch(function(){
alert(2);
})
會發現先alert出1之後return的abc字串傳到下一個then做結果的alert
new Promise(function(resolve,reject){
resolve('abc');//成功就決定去做這件事情,return 1
reject();//失敗就放棄去做這件事情,return 2
}).then(function(v){
alert(v);
return 'abc';
}).then(function(v){
alert(v)
}).catch(function(){
alert(2);
})
會發現一開始resolve傳入的字串abc在被alert之後又return的abc字串傳到下一個then做結果的alert
new Promise(function(resolve,reject){
resolve('abc');//成功就決定去做這件事情,return 1
reject();//失敗就放棄去做這件事情,return 2
}).then(function(v){
alert(v);
return 'abc';
}).then(function(v){
//alert(v)
return '123'
}).then(function(m){
console.log(m);
}).catch(function(){
alert(2);
})
會發現最後console.log出來的結果會是123
問題3:執行每個鍊式的then區塊時候throw出自定義錯誤資訊
new Promise(function(resolve,reject){
resolve('abc');//成功就決定去做這件事情,return 1
reject();//失敗就放棄去做這件事情,return 2
}).then(function(v){
alert(v);
return 'abc';
}).then(function(v){
//alert(v)
return '123'
}).then(function(m){
//console.log(m);
throw 'this is bug'
}).catch(function(n){
console.log(n)
})
會發現最後會將自定義的錯誤資訊給印出來
new Promise(function(resolve,reject){
})
留言
張貼留言