promise異步回調解決回調地獄的問題

1、promise是什麼

1. 主要用于異步計算
2. 可以将異步操作隊列化，按照期望的順序執行，傳回符合預期的結果
3. 可以在對象之間傳遞和操作promise，幫助我們處理隊列

2、異步回調的問題：

1. 之前處理異步是通過純粹的回調函數的形式進行處理
2. 很容易進入到回調地獄中，剝奪了函數return的能力
3. 問題可以解決，但是難以讀懂，維護困難
4. 稍有不慎就會踏入回調地獄 - 嵌套層次深，不好維護

3、promise簡介

1. promise是一個對象，對象和函數的差別就是對象可以儲存狀态，函數不可以（閉包除外）
2. 并未剝奪函數return的能力，是以無需層層傳遞callback，進行回調擷取資料
3. 代碼風格，容易了解，便于維護
4. 多個異步等待合并便于解決

4、promise詳解

resolve作用是，将Promise對象的狀态從“未完成”變為“成功”（即從 pending 變為 resolved），在異步操作成功時調用，并将異步操作的結果，作為參數傳遞出去；

reject作用是，将Promise對象的狀态從“未完成”變為“失敗”（即從 pending 變為 rejected），在異步操作失敗時調用，并将異步操作報出的錯誤，作為參數傳遞出去。

promise有三個狀态：

1. pending [待定] 初始狀态
2. fulfilled [實作] 操作成功
3. rejected [被否決] 操作失敗

當promise狀态發生改變，就會觸發**then()**裡的響應函數處理後續步驟；

promise狀态一經改變，不會再變。

Promise對象的狀态改變，隻有兩種可能：

1. 從pending變為fulfilled
2. 從pending變為rejected。

這兩種情況隻要發生，狀态就凝固了，不會再變了。

5、.then()

1. 接收兩個函數作為參數，分别代表fulfilled（成功）和rejected（失敗）
2. .then()傳回一個新的Promise執行個體，是以它可以鍊式調用
3. 目前面的Promise狀态改變時，.then()根據其最終狀态，選擇特定的狀态響應函數執行
4. 狀态響應函數可以傳回新的promise，或其他值，不傳回值也可以我們可以認為它傳回了一個null；
5. 如果傳回新的promise，那麼下一級.then()會在新的promise狀态改變之後執行
6. 如果傳回其他任何值，則會立即執行下一級.then()

6、錯誤處理兩種做法：

Promise會自動捕獲内部異常，并交給rejected響應函數處理。

（1）第一種錯誤處理

<script>
        new Promise((resolve,reject)=>{
            setTimeout(()=>{
                reject('bye')
            },2000)
        }).then((val)=>{
            console.log(val)
        },(err)=>{
            console.log("Error",error)
        })
    </script>      

（2）第二種錯誤處理

<script>
        new Promise((resolve)=>{
            setTimeout(()=>{
                throw new Error('bye')
            },2000)
        }).then((val)=>{
            console.log(val)
        }).catch(error=>{
            console.log("Error",error)
        })
</script>      

第一種：reject('錯誤資訊').then(() => {}, () => {錯誤處理邏輯})
第二種：throw new Error('錯誤資訊').catch( () => {錯誤處理邏輯})      

推薦使用第二種方式，更加清晰好讀，并且可以捕獲前面所有的錯誤（可以捕獲N個then回調錯誤）

7、promise的用法

（1）常見用法：

例如：我們要從遠端的服務家在資源如果5000ms還沒有加載過來我們就告知使用者加載失敗      

（2）現實中的用法

1. 可讀性好
2. 傳回 的結果可以加入任何Promise隊列

8、回調地獄和promise對比

（1）回調地獄

/***
   第一步：找到北京的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)
           }
         })
       }
     })
   }
 })      

（2）promise寫法

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