ES6 中的 Promise

Promise

引入

回調地獄

• 回調函數中 嵌套 其他回調函數 例子: 多個檔案依次讀取
• 解決方法: 使用ES6 中的 Promise, 來解決 回調地獄的問題

基本概念

1. Promise 是一個 構造函數, 既然是構造函數 就可以new Promise() 得到一個 Promise 的執行個體
2. 在 Promise 上, 有兩個函數 resolve(成功後的回調) 和 reject(失敗後的回調)
3. 在 Promise 構造函數 Prototype 屬性上, 有.then() 方法
4. Promise 表示一個 異步操作, 每當我們new 一個Promise 的執行個體, 就表示一個異步操作
5. 異步操作有兩種狀态
   • 狀态1: 異步執行成功, 需要調用 resolve 傳回結果
   • 狀态2: 異步執行失敗, 需要調用 reject 傳回結果
   • 由于異步操作無法使用 return 把操作結果傳回, 這時候, 隻能使用回調函數 來把結果(成功/失敗)傳回.
6. 我們可以在 new 出來的 Promise 執行個體上, 調用 .then()方法, [預先] 為這個 Promise異步操作, 指定 成功 和 失敗 回調函數.

形式上 和 具體的 異步操作的差別

形式上 的異步操作: 我們知道它是一個異步操作, 但是具體做什麼事情, 目前還不清楚

var promise = new Promise()
           

具體的 的異步操作: 使用 function 指定一個具體的 異步操作

var promise = new Promise(function(){
    // 這個 fun 内部寫的就是具體的異步操作
})
           

Promise執行個體 隻要被建立 就會立即執行裡面的異步方法

• 每當 new 一個 Promise 執行個體的時候, 就會執行 異步操作中的代碼
• 也就是說, new的時候, 除了能夠得到一個 Promose 執行個體之外, 還會立即調用 我們傳遞的 function, 并執行function 中的 異步操作代碼

通過 .then() 指定

成功

和

失敗

的回調

const p = new Promise(function(res, rej){
    // 成功傳回res 失敗傳回rej
    res(data)
    rej(err)
})

p.then(function(data){
    console.log(data)
},function(err){
    console.log(err)
})
           

注意: 通過.then 指定回調函數的時候, 成功的回調 必須傳, 失敗的回調 可以省略不傳

Promise 正确使用方式

捕獲異常的兩種方式

1.Promise 執行失敗, 但是不影響後續, 此時, 我們可以單獨為 每個Promise, 通過 .then 指定一下失敗回調

2.和上面需求剛好相反, Promise 執行失敗,後續直接終止, 可以使用 .catch() 指定回調函數 捕獲錯誤

作用: 如果執行過程中, 有任意一步失敗, 就會立即中終止所有 Promise的執行, 并馬上進入.catch() 中, 抛出異常

.catch(err => console.log(err.message))    
           

Jquery 中Ajax使用Promise指定成功回調函數

$.ajax({
  url: '/path/to/file',
  type: 'GET',
  dataType: 'xml/html/script/json/jsonp',
  data: {param1: 'value1'},
})
  .then(function(data){
    console.log(data)
  })