promise是什么？
1、主要用於異步計算
2、可以將異步操作隊列化，按照期望的順序執行，返回符合預期的結果
3、可以在對象之間傳遞和操作promise，幫助我們處理隊列
為什么會有promise？
為了避免界面凍結（任務）
-
同步：假設你去了一家飯店，找個位置，叫來服務員，這個時候服務員對你說，對不起我是“同步”服務員，我要服務完這張桌子才能招呼你。那桌客人明明已經吃上了，你只是想要個菜單，這么小的動作，服務員卻要你等到別人的一個大動作完成之后，才能再來招呼你，這個便是同步的問題：也就是“順序交付的工作1234，必須按照1234的順序完成”。
-
異步：則是將耗時很長的A交付的工作交給系統之后，就去繼續做B交付的工作，。等到系統完成了前面的工作之后，再通過回調或者事件，繼續做A剩下的工作。
AB工作的完成順序，和交付他們的時間順序無關，所以叫“異步”。
異步操作的常見語法
- 事件監聽
document.getElementById('#start').addEventListener('click', start, false); function start() { // 響應事件，進行相應的操作 } // jquery on 監聽 $('#start').on('click', start) - 回調
// 比較常見的有ajax $.ajax('http://www.wyunfei.com/', { success (res) { // 這里可以監聽res返回的數據做回調邏輯的處理 } }) // 或者在頁面加載完畢后回調 $(function() { // 頁面結構加載完成，做回調邏輯處理 }) 有了nodeJS之后...對異步的依賴進一步加劇了
大家都知道在nodeJS出來之前PHP、Java、python等后台語言已經很成熟了，nodejs要想能夠有自己的一片天，那就得拿出點自己的絕活：
無阻塞高並發，是nodeJS的招牌，要達到無阻塞高並發異步是其基本保障
舉例：查詢數據從數據庫，PHP第一個任務查詢數據，后面有了新任務，那么后面任務會被掛起排隊；而nodeJS是第一個任務掛起交給數據庫去跑，然后去接待第二個任務交給對應的系統組件去處理掛起，接着去接待第三個任務...那這樣子的處理必然要依賴於異步操作
異步回調的問題：
- 之前處理異步是通過純粹的回調函數的形式進行處理
- 很容易進入到回調地獄中，剝奪了函數return的能力
- 問題可以解決，但是難以讀懂，維護困難
- 稍有不慎就會踏入回調地獄 - 嵌套層次深，不好維護
一般情況我們一次性調用API就可以完成請求。
有些情況需要多次調用服務器API，就會形成一個鏈式調用，比如為了完成一個功能，我們需要調用API1、API2、API3，依次按照順序進行調用，這個時候就會出現回調地獄的問題
promise
- promise是一個對象，對象和函數的區別就是對象可以保存狀態，函數不可以（閉包除外）
- 並未剝奪函數return的能力，因此無需層層傳遞callback，進行回調獲取數據
- 代碼風格，容易理解，便於維護
- 多個異步等待合並便於解決
promise詳解
new Promise( function (resolve, reject) { // 一段耗時的異步操作 resolve('成功') // 數據處理完成 // reject('失敗') // 數據處理出錯 } ).then( (res) => {console.log(res)}, // 成功 (err) => {console.log(err)} // 失敗 ) - resolve作用是，將Promise對象的狀態從“未完成”變為“成功”（即從 pending 變為 resolved），在異步操作成功時調用，並將異步操作的結果，作為參數傳遞出去；
reject作用是，將Promise對象的狀態從“未完成”變為“失敗”（即從 pending 變為 rejected），在異步操作失敗時調用，並將異步操作報出的錯誤，作為參數傳遞出去。 - promise有三個狀態：
1、pending[待定]初始狀態
2、fulfilled[實現]操作成功
3、rejected[被否決]操作失敗
當promise狀態發生改變，就會觸發then()里的響應函數處理后續步驟；
promise狀態一經改變，不會再變。 - Promise對象的狀態改變，只有兩種可能：
從pending變為fulfilled
從pending變為rejected。
這兩種情況只要發生，狀態就凝固了，不會再變了。
最簡單示例：
new Promise(resolve => { setTimeout(() => { resolve('hello') }, 2000) }).then(res => { console.log(res) }) 分兩次，順序執行
new Promise(resolve => { setTimeout(() => { resolve('hello') }, 2000) }).then(val => { console.log(val) // 參數val = 'hello' return new Promise(resolve => { setTimeout(() => { resolve('world') }, 2000) }) }).then(val => { console.log(val) // 參數val = 'world' }) promise完成后then()
let pro = new Promise(resolve => { setTimeout(() => { resolve('hello world') }, 2000) }) setTimeout(() => { pro.then(value => { console.log(value) // hello world }) }, 2000) 結論：promise作為隊列最為重要的特性，我們在任何一個地方生成了一個promise隊列之后，我們可以把他作為一個變量傳遞到其他地方。
假如在.then()的函數里面不返回新的promise，會怎樣？
.then()
1、接收兩個函數作為參數，分別代表fulfilled（成功）和rejected（失敗）
2、.then()返回一個新的Promise實例，所以它可以鏈式調用
3、當前面的Promise狀態改變時，.then()根據其最終狀態，選擇特定的狀態響應函數執行
4、狀態響應函數可以返回新的promise，或其他值，不返回值也可以我們可以認為它返回了一個null；
5、如果返回新的promise，那么下一級.then()會在新的promise狀態改變之后執行
6、如果返回其他任何值，則會立即執行下一級.then()
.then()里面有.then()的情況
1、因為.then()返回的還是Promise實例
2、會等里面的then()執行完，再執行外面的
-
對於我們來說，此時最好將其展開，也是一樣的結果，而且會更好讀：
展開增加可讀性
錯誤處理
Promise會自動捕獲內部異常，並交給rejected響應函數處理。
-
第一種錯誤處理
第一種錯誤處理 -
第二種錯誤處理
第二種錯誤處理
- 錯誤處理兩種做法：
第一種：reject('錯誤信息').then(() => {}, () => {錯誤處理邏輯})
第二種：throw new Error('錯誤信息').catch( () => {錯誤處理邏輯})
推薦使用第二種方式，更加清晰好讀，並且可以捕獲前面所有的錯誤（可以捕獲N個then回調錯誤）
catch() + then()
-
第一種情況：
第一種情況
第一種情況 - 結果
結論：catch也會返回一個promise實例，並且是resolved狀態
-
第二種情況：
第二種情況
結論：拋出錯誤變為rejected狀態，所以繞過兩個then直接跑到最下面的catch
Promise.all() 批量執行
Promise.all([p1, p2, p3])用於將多個promise實例，包裝成一個新的Promise實例，返回的實例就是普通的promise
它接收一個數組作為參數
數組里可以是Promise對象，也可以是別的值，只有Promise會等待狀態改變
當所有的子Promise都完成，該Promise完成，返回值是全部值得數組
有任何一個失敗，該Promise失敗，返回值是第一個失敗的子Promise結果
//切菜 function cutUp(){ console.log('開始切菜。'); var p = new Promise(function(resolve, reject){ //做一些異步操作 setTimeout(function(){ console.log('切菜完畢！'); resolve('切好的菜'); }, 1000); }); return p; } //燒水 function boil(){ console.log('開始燒水。'); var p = new Promise(function(resolve, reject){ //做一些異步操作 setTimeout(function(){ console.log('燒水完畢！'); resolve('燒好的水'); }, 1000); }); return p; } Promise.all([cutUp(), boil()]) .then((result) => { console.log('准備工作完畢'); console.log(result); }) Promise.race() 類似於Promise.all() ，區別在於它有任意一個完成就算完成
let p1 = new Promise(resolve => { setTimeout(() => { resolve('I\`m p1 ') }, 1000) }); let p2 = new Promise(resolve => { setTimeout(() => { resolve('I\`m p2 ') }, 2000) }); Promise.race([p1, p2]) .then(value => { console.log(value) }) -
常見用法：
異步操作和定時器放在一起，，如果定時器先觸發，就認為超時，告知用戶；
例如我們要從遠程的服務家在資源如果5000ms還沒有加載過來我們就告知用戶加載失敗 -
現實中的用法
回調包裝成Promise，他有兩個顯而易見的好處：
1、可讀性好
2、返回 的結果可以加入任何Promise隊列
實戰示例，回調地獄和promise對比：
/*** 第一步：找到北京的id 第二步：根據北京的id -> 找到北京公司的id 第三步：根據北京公司的id -> 找到北京公司的詳情 目的：模擬鏈式調用、回調地獄 ***/ // 回調地獄 // 請求第一個API: 地址在北京的公司的id $.ajax({ url: 'https://www.easy-mock.com/mock/5a52256ad408383e0e3868d7/lagou/city', success (resCity) { let findCityId = resCity.filter(item => { if (item.id == 'c1') { return item } })[0].id $.ajax({ // 請求第二個API: 根據上一個返回的在北京公司的id “findCityId”，找到北京公司的第一家公司的id url: 'https://www.easy-mock.com/mock/5a52256ad408383e0e3868d7/lagou/position-list', success (resPosition) { let findPostionId = resPosition.filter(item => { if(item.cityId == findCityId) { return item } })[0].id // 請求第三個API: 根據上一個API的id(findPostionId)找到具體公司，然后返回公司詳情 $.ajax({ url: 'https://www.easy-mock.com/mock/5a52256ad408383e0e3868d7/lagou/company', success (resCom) { let comInfo = resCom.filter(item => { if (findPostionId == item.id) { return item } })[0] console.log(comInfo) } }) } }) } }) // Promise 寫法 // 第一步：獲取城市列表 const cityList = new Promise((resolve, reject) => { $.ajax({ url: 'https://www.easy-mock.com/mock/5a52256ad408383e0e3868d7/lagou/city', success (res) { resolve(res) } }) }) // 第二步：找到城市是北京的id cityList.then(res => { let findCityId = res.filter(item => { if (item.id == 'c1') { return item } })[0].id findCompanyId().then(res => { // 第三步（2）：根據北京的id -> 找到北京公司的id let findPostionId = res.filter(item => { if(item.cityId == findCityId) { return item } })[0].id // 第四步（2）：傳入公司的id companyInfo(findPostionId) }) }) // 第三步（1）：根據北京的id -> 找到北京公司的id function findCompanyId () { let aaa = new Promise((resolve, reject) => { $.ajax({ url: 'https://www.easy-mock.com/mock/5a52256ad408383e0e3868d7/lagou/position-list', success (res) { resolve(res) } }) }) return aaa } // 第四步：根據上一個API的id(findPostionId)找到具體公司，然后返回公司詳情 function companyInfo (id) { let companyList = new Promise((resolve, reject) => { $.ajax({ url: 'https://www.easy-mock.com/mock/5a52256ad408383e0e3868d7/lagou/company', success (res) { let comInfo = res.filter(item => { if (id == item.id) { return item } })[0] console.log(comInfo) } }) }) }