本文轉(zhuǎn)載至http://www.reibang.com/p/1b63a13c2701

promise是什么氢架？

1苍匆、主要用于異步計算
2、可以將異步操作隊列化函荣，按照期望的順序執(zhí)行显押，返回符合預期的結果
3、可以在對象之間傳遞和操作promise傻挂，幫助我們處理隊列

為什么會有promise乘碑？

為了避免界面凍結（任務）

• 同步：假設你去了一家飯店，找個位置踊谋，叫來服務員蝉仇，這個時候服務員對你說旋讹，對不起我是“同步”服務員，我要服務完這張桌子才能招呼你。那桌客人明明已經(jīng)吃上了雹顺，你只是想要個菜單敏释，這么小的動作，服務員卻要你等到別人的一個大動作完成之后透绩，才能再來招呼你，這個便是同步的問題：也就是“順序交付的工作1234，必須按照1234的順序完成”宛官。

• 異步：則是將耗時很長的A交付的工作交給系統(tǒng)之后，就去繼續(xù)做B交付的工作瓦糕，底洗。等到系統(tǒng)完成了前面的工作之后，再通過回調(diào)或者事件咕娄，繼續(xù)做A剩下的工作亥揖。
  AB工作的完成順序，和交付他們的時間順序無關圣勒，所以叫“異步”费变。

異步操作的常見語法

1. 事件監(jiān)聽

document.getElementById('#start').addEventListener('click', start, false);
function start() {
  // 響應事件，進行相應的操作
}
// jquery on 監(jiān)聽
$('#start').on('click', start)

2. 回調(diào)

// 比較常見的有ajax
$.ajax('http://www.wyunfei.com/', {
 success (res) {
   // 這里可以監(jiān)聽res返回的數(shù)據(jù)做回調(diào)邏輯的處理
 }
})

// 或者在頁面加載完畢后回調(diào)
$(function() {
 // 頁面結構加載完成圣贸，做回調(diào)邏輯處理
})

有了nodeJS之后...對異步的依賴進一步加劇了

大家都知道在nodeJS出來之前PHP挚歧、Java、python等后臺語言已經(jīng)很成熟了吁峻，nodejs要想能夠有自己的一片天滑负，那就得拿出點自己的絕活：
無阻塞高并發(fā)，是nodeJS的招牌用含，要達到無阻塞高并發(fā)異步是其基本保障
舉例：查詢數(shù)據(jù)從數(shù)據(jù)庫橙困，PHP第一個任務查詢數(shù)據(jù)，后面有了新任務耕餐，那么后面任務會被掛起排隊凡傅；而nodeJS是第一個任務掛起交給數(shù)據(jù)庫去跑，然后去接待第二個任務交給對應的系統(tǒng)組件去處理掛起肠缔，接著去接待第三個任務...那這樣子的處理必然要依賴于異步操作

異步回調(diào)的問題：

• 之前處理異步是通過純粹的回調(diào)函數(shù)的形式進行處理
• 很容易進入到回調(diào)地獄中夏跷，剝奪了函數(shù)return的能力
• 問題可以解決，但是難以讀懂明未，維護困難
• 稍有不慎就會踏入回調(diào)地獄 - 嵌套層次深槽华，不好維護

image

一般情況我們一次性調(diào)用API就可以完成請求。
有些情況需要多次調(diào)用服務器API趟妥，就會形成一個鏈式調(diào)用猫态，比如為了完成一個功能，我們需要調(diào)用API1、API2亲雪、API3勇凭，依次按照順序進行調(diào)用，這個時候就會出現(xiàn)回調(diào)地獄的問題

promise

• promise是一個對象义辕，對象和函數(shù)的區(qū)別就是對象可以保存狀態(tài)虾标，函數(shù)不可以（閉包除外）
• 并未剝奪函數(shù)return的能力，因此無需層層傳遞callback灌砖，進行回調(diào)獲取數(shù)據(jù)
• 代碼風格璧函，容易理解，便于維護
• 多個異步等待合并便于解決

promise詳解

new Promise(
  function (resolve, reject) {
    // 一段耗時的異步操作
    resolve('成功') // 數(shù)據(jù)處理完成
    // reject('失敗') // 數(shù)據(jù)處理出錯
  }
).then(
  (res) => {console.log(res)},  // 成功
  (err) => {console.log(err)} // 失敗
)

• resolve作用是基显，將Promise對象的狀態(tài)從“未完成”變?yōu)椤俺晒Α保磸?pending 變?yōu)?resolved）蘸吓，在異步操作成功時調(diào)用，并將異步操作的結果撩幽，作為參數(shù)傳遞出去美澳；
  reject作用是，將Promise對象的狀態(tài)從“未完成”變?yōu)椤笆　保磸?pending 變?yōu)?rejected）摸航，在異步操作失敗時調(diào)用制跟，并將異步操作報出的錯誤，作為參數(shù)傳遞出去酱虎。
• promise有三個狀態(tài)：
  1雨膨、pending[待定]初始狀態(tài)
  2、fulfilled[實現(xiàn)]操作成功
  3读串、rejected[被否決]操作失敗
  當promise狀態(tài)發(fā)生改變聊记，就會觸發(fā)then()里的響應函數(shù)處理后續(xù)步驟；
  promise狀態(tài)一經(jīng)改變恢暖，不會再變排监。
• Promise對象的狀態(tài)改變，只有兩種可能：
  從pending變?yōu)閒ulfilled
  從pending變?yōu)閞ejected杰捂。
  這兩種情況只要發(fā)生舆床，狀態(tài)就凝固了，不會再變了嫁佳。

最簡單示例：

new Promise(resolve => {
  setTimeout(() => {
    resolve('hello')
  }, 2000)
}).then(res => {
  console.log(res)
})

分兩次挨队，順序執(zhí)行

new Promise(resolve => {
    setTimeout(() => {
      resolve('hello')
    }, 2000)
  }).then(val => {
    console.log(val) //  參數(shù)val = 'hello'
    return new Promise(resolve => {
      setTimeout(() => {
        resolve('world')
      }, 2000)
    })
  }).then(val => {
    console.log(val) // 參數(shù)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()的函數(shù)里面不返回新的promise，會怎樣瓤漏？

.then()

1腾夯、接收兩個函數(shù)作為參數(shù)颊埃，分別代表fulfilled（成功）和rejected（失敗）
2蝶俱、.then()返回一個新的Promise實例班利，所以它可以鏈式調(diào)用
3、當前面的Promise狀態(tài)改變時跷乐，.then()根據(jù)其最終狀態(tài)，選擇特定的狀態(tài)響應函數(shù)執(zhí)行
4趾浅、狀態(tài)響應函數(shù)可以返回新的promise愕提，或其他值，不返回值也可以我們可以認為它返回了一個null皿哨；
5浅侨、如果返回新的promise，那么下一級.then()會在新的promise狀態(tài)改變之后執(zhí)行
6证膨、如果返回其他任何值如输，則會立即執(zhí)行下一級.then()

.then()里面有.then()的情況

1、因為.then()返回的還是Promise實例
2央勒、會等里面的then()執(zhí)行完不见，再執(zhí)行外面的

image

• 對于我們來說，此時最好將其展開崔步，也是一樣的結果稳吮，而且會更好讀：

  image

錯誤處理

Promise會自動捕獲內(nèi)部異常，并交給rejected響應函數(shù)處理井濒。

1. 第一種錯誤處理

   image

2. 第二種錯誤處理

   image

• 錯誤處理兩種做法：
  第一種：reject('錯誤信息').then(() => {}, () => {錯誤處理邏輯})
  第二種：throw new Error('錯誤信息').catch( () => {錯誤處理邏輯})
  推薦使用第二種方式灶似，更加清晰好讀，并且可以捕獲前面所有的錯誤（可以捕獲N個then回調(diào)錯誤）

catch() + then()

• 第一種情況：

  image
  image

  結論：catch也會返回一個promise實例瑞你，并且是resolved狀態(tài)

• 第二種情況：

  image

image

結論：拋出錯誤變?yōu)閞ejected狀態(tài)酪惭，所以繞過兩個then直接跑到最下面的catch

Promise.all() 批量執(zhí)行

Promise.all([p1, p2, p3])用于將多個promise實例，包裝成一個新的Promise實例者甲，返回的實例就是普通的promise
它接收一個數(shù)組作為參數(shù)
數(shù)組里可以是Promise對象春感，也可以是別的值，只有Promise會等待狀態(tài)改變
當所有的子Promise都完成虏缸，該Promise完成甥厦，返回值是全部值得數(shù)組
有任何一個失敗，該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() 竟纳，區(qū)別在于它有任意一個完成就算完成

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

• 常見用法：
  異步操作和定時器放在一起，疚鲤，如果定時器先觸發(fā)锥累，就認為超時，告知用戶集歇；
  例如我們要從遠程的服務家在資源如果5000ms還沒有加載過來我們就告知用戶加載失敗

• 現(xiàn)實中的用法
  回調(diào)包裝成Promise桶略，他有兩個顯而易見的好處：
  1、可讀性好
  2诲宇、返回 的結果可以加入任何Promise隊列

實戰(zhàn)示例际歼，回調(diào)地獄和promise對比：

/***
   第一步：找到北京的id
   第二步：根據(jù)北京的id -> 找到北京公司的id
   第三步：根據(jù)北京公司的id -> 找到北京公司的詳情
   目的：模擬鏈式調(diào)用、回調(diào)地獄
 ***/

 // 回調(diào)地獄
 // 請求第一個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: 根據(jù)上一個返回的在北京公司的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: 根據(jù)上一個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）：根據(jù)北京的id -> 找到北京公司的id
        let findPostionId = res.filter(item => {
            if(item.cityId == findCityId) {
              return item
            }
        })[0].id

        // 第四步（2）：傳入公司的id
        companyInfo(findPostionId)

      })

    })

  // 第三步（1）：根據(jù)北京的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
  }

// 第四步：根據(jù)上一個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)
      }
    })
  })
}