promise 學習筆記

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)

　　2.回調

// 比較常見的有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響應函數處理。

第一種錯誤處理

2. 第二種錯誤處理

錯誤處理兩種做法：

第一種：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隊列

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

promise 學習筆記

promise是什麼？

為什麼會有promise？

異步操作的常見文法

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

異步回調的問題：

promise

promise詳解

最簡單示例：

分兩次，順序執行

promise完成後then()

假如在.then()的函數裡面不傳回新的promise，會怎樣？

.then()

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

錯誤處理

catch() + then()

Promise.all() 批量執行

Promise.race() 類似于Promise.all() ，差別在于它有任意一個完成就算完成

繼續閱讀

coco李玟，抑郁症輕生走了我的天，上次發語音感覺狀态還很好，“親愛的，我是coco，感受到大家對我的愛跟支援，然後你們

vue3 基礎-動态元件 & 異步元件

前端實作一個異步的promise參考文檔分析具體實作代碼

promise使用promise進行判斷網絡狀态

Promise和async學習

async 異步變同步ES6 async函數

人生中最有意義的第一枚戒指，不是DR，不是卡地亞，而是來自聯合國兒童基金會戒指上外側刻着“promise”，内側刻着“u

手寫一份promise的實作

promise#inmyfeelings

前端面試題：Promise

jquery promise從入門到裝逼

JavaScript和ES6中的Promise 對象

Promise的相關介紹

小程式 ES6 Promise用法講解

js-Promise A+規範術語要求注釋

Angularjs的$http方法的success和then的差別