Promise對(duì)象
特性
Promise為es6標(biāo)準(zhǔn)語(yǔ)法针饥，主要用于解決異步回調(diào)問(wèn)題薇正，Promise 對(duì)象可分為三種狀態(tài)涡驮。pending（進(jìn)行中）儿奶、fulfilled（已成功）和rejected（已失敗）梗醇，Promise 狀態(tài)為不可逆的知允，也就是說(shuō)promise只能從pending->fulfilled，或從 pending -> rejected 由于異步操作的結(jié)果決定狀態(tài)叙谨。一旦狀態(tài)改變此對(duì)象將不能在復(fù)用温鸽。
示例
Promist 的基本用法本文章就不多做解釋?zhuān)偨Y(jié)其中特性。
let waitServerResponse = function(waitTime){
return new Promise((resolve, reject)=>{
if(waitTime>0){
setTimeout(()=>{
resolve(`服務(wù)器響應(yīng)耗時(shí)：${waitTime}`)
},waitTime)
}else {
reject('系統(tǒng)故障')
}
})
}
waitServerResponse(3000).then((result)=>{
console.log(result) // 服務(wù)器響應(yīng)耗時(shí)：3000
})
waitServerResponse(-1).then((success)=>{
console.log('進(jìn)入success',success)
}).catch((err)=>{
console.log('捕獲到失敗狀態(tài)：',err) // 捕獲到失敗狀態(tài)： 系統(tǒng)故障
})
console.log('程序結(jié)束手负！')
/**
* 控制臺(tái)輸出：
* 捕獲到失敗狀態(tài)： 系統(tǒng)故障
* console.log('程序結(jié)束涤垫！')
* 服務(wù)器響應(yīng)耗時(shí)：3000
*/
由以上例子可以得出結(jié)論當(dāng)我們發(fā)起一個(gè)Promise操作時(shí) .then() 會(huì)在本輪 Javascript event loop（事件循環(huán)）運(yùn)行完成才會(huì)執(zhí)行，promise并不會(huì)阻塞后面代碼執(zhí)行虫溜，因此在我們想要執(zhí)行類(lèi)似請(qǐng)求執(zhí)行完成得到某某結(jié)果后雹姊，在執(zhí)行其他邏輯，就必須寫(xiě)在then函數(shù)里衡楞。
// 強(qiáng)烈不推薦使用此種嵌套寫(xiě)法用于工作中
waitServerResponse(3000).then((result)=>{
console.log(result)
waitServerResponse(-1).then((success)=>{
console.log('進(jìn)入success',success)
}).catch((err)=>{
console.log('捕獲到失敗狀態(tài)：',err) // 捕獲到失敗狀態(tài)： 系統(tǒng)故障
console.log('程序結(jié)束！')
})
})
/**
* 控制臺(tái)輸出：
* 服務(wù)器響應(yīng)耗時(shí)：3000
* 捕獲到失敗狀態(tài)： 系統(tǒng)故障
* 程序結(jié)束！
*/
如果你一直都只是在這樣使用promise那你并不能稱(chēng)得上會(huì)使用Promise這種用法同Ajax中請(qǐng)求中的回調(diào)函數(shù)如出一轍瘾境。根本就沒(méi)有解決回調(diào)地獄的問(wèn)題歧杏。（筆者在很長(zhǎng)一段時(shí)間也用這種方式，并自以為樂(lè)??????）
鏈?zhǔn)秸{(diào)用
promise設(shè)計(jì)的目的就是想通過(guò)鏈?zhǔn)秸{(diào)用來(lái)解決回調(diào)問(wèn)題迷守。我們可以在then函數(shù)返回一個(gè)全新的promise來(lái)創(chuàng)造一個(gè)Promise chain犬绒。
waitServerResponse(3000).then((result)=>{
console.log(result)
return waitServerResponse(-1) // 使用return 創(chuàng)造 promise chain
}).then((success)=>{
console.log('進(jìn)入success',success)
}).catch((err)=>{
console.log('捕獲到失敗狀態(tài)：',err) // 捕獲到失敗狀態(tài)： 系統(tǒng)故障
console.log('程序結(jié)束！')
})
// 還可以使用 => 語(yǔ)法 更加簡(jiǎn)化
waitServerResponse(3000)
.then(result => waitServerResponse(-1))
.then(success => console.log('進(jìn)入success',success))
.catch(err => console.log('程序結(jié)束兑凿！'))
通過(guò)Promise chain 可以解決兩個(gè)異步操作之前串行的問(wèn)題凯力，下面是Promise并行的場(chǎng)景。
組合
我當(dāng)我門(mén)同時(shí)向服務(wù)器發(fā)送三次請(qǐng)求 請(qǐng)求分別要等待 3s礼华、2s咐鹤、1s，獲取到全部數(shù)據(jù)后再執(zhí)行相應(yīng)操作圣絮。此時(shí)使用Promise chain理論耗時(shí)6s顯然是不可取的祈惶，Promise提供了all()方法解決并行問(wèn)題。
let request1 = waitServerResponse(3000)
let request2 = waitServerResponse(2000)
let request3 = waitServerResponse(1000)
Promise.all([request1,request2,request3,]).then((values) => {
console.log(values) // ["服務(wù)器響應(yīng)耗時(shí)：3000", "服務(wù)器響應(yīng)耗時(shí)：2000", "服務(wù)器響應(yīng)耗時(shí)：1000"]
}
)
// 其中有任何promise狀態(tài)為失敗 都會(huì)被catch捕獲
let request1 = waitServerResponse(3000)
let request2 = waitServerResponse(2000)
let request3 = waitServerResponse(-1)
Promise.all([request1,request2,request3,])
.then(values =>console.log(values))
.catch(errs=>{
console.log('catch======>',errs) // catch======> 系統(tǒng)故障
})
Promise 的理解到此為止扮匠，但promise還不是'回調(diào)問(wèn)題'的最終解決方案捧请，在es2017(es8)中提出 async/await方案下篇文章我們繼續(xù)探討。
參考文檔：
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Using_promises
http://es6.ruanyifeng.com/#docs/promise
