es6基礎0x023：Promise

0x000 概述

Promise是一個異步編程的解決方案，他經常和ajax一起出現，導致很多人以爲Promise是一種新的網絡請求技術，其實不然。Promise是一種思考方式、編程方式。

0x000 栗子

先寫一個栗子

setTimeout(()=>{
    console.log('here')
},3000)

很簡單，3s之後將會打印出here，現在換成Promise：

new Promise((resolve, reject)=>{
    setTimeout(()=>{
        resolve()
    }, 3000)
}).then(()=>{
    console.log('here')
})

執行結果也是一樣，3s之後將會輸出here，還可以這麼寫

let proxy=new Promise((resolve, reject)=>{
    setTimeout(()=>{
        resolve()
    }, 3000)
})

setTimeout(()=>{
    proxy.then(()=>{
        console.log('here')
    })
}, 10000)

13s後才輸出here

0x002 初始化

• 語法

  new Promise(executor)

  • 參數：

    • executor：處理器函數，函數的完整簽名是(resolve, reject)=>{}
  • 返回值：一個Promise實例

• 栗子

  let promise=new Promise((resolve, reject)=>{
      setTimeout(()=>{
          resolve()
      }, 3000)
  })
  console.log(promise) // Promise {<pending>}

• 說明：
  使用new Promise實例化一個Promise之後，將它輸出出來，可以看到他有一個pending，這是說明這個promise的狀態，稱爲PromiseStatus，promise一共有3種狀態，一個promise必定處於下面三個狀態之一：

  • pending：初始狀態
  • fulfilled：操作成功
  • rejected：操作失敗

0x003 then

• 語法：

  promise.then(onFulfilled, onRejected)

  • onFulfilled：操作成功的回調
  • onRejected：操作失敗的回調

• 栗子1：

  let promise=new Promise((resolve, reject)=>{
      setTimeout(()=>{
          resolve()
      }, 3000)
  })
  console.log(promise) // Promise {<pending>}
  promise.then(()=>{
      console.log(promise) // Promise {<resolved>: undefined}
  })

• 說明1：
  當調用resolve之後，then函數執行了，同時promise的PromiseStatus變成了resolved。onFulfilled同時接受一個變量，稱之爲PromiseValue：

  let promise=new Promise((resolve, reject)=>{
      setTimeout(()=>{
          resolve(1)
      }, 3000)
  })
  promise.then((value)=>{
      console.log(value) // 1
  })

• 栗子2:

  let promise=new Promise((resolve, reject)=>{
      setTimeout(()=>{
          reject()
      }, 3000)
  })
  console.log(promise) // Promise {<pending>}
  promise.then(()=>{},()=>{
      console.log(promise) // Promise {<rejected>: undefined}
  })

  當調用reject之後，then執行了，此時promise的PromiseStatus變成了rejected，同時，onRejected回調接受一個reason，作爲操作失敗的原因說明：

  let promise=new Promise((resolve, reject)=>{
      setTimeout(()=>{
          reject('nothing')
      }, 3000)
  })
  promise.then(()=>{},(reason)=>{
      console.log(reason) // nothing
  })

0x004 catch

• 語法：

  promise.catch(onRejected)

  • onRejected：回調

• 栗子：

  let promise=new Promise((resolve, reject)=>{
      setTimeout(()=>{
          resolve()
      }, 3000)
  }).then(()=>{
      throw 'error'
  }).catch((e)=>{
      console.log(`i catch you: ${e}`) // i catch you error 
  })

• 注意1：在異中的錯誤不會執行catch

  let promise=new Promise((resolve, reject)=>{
      setTimeout(()=>{
          throw 'error'
      }, 3000)
  }).catch((e)=>{
      console.log(`i catch you: ${e}`) // Uncaught error 
  })

• 注意2：resolve之後會被忽略

   let promise=new Promise((resolve, reject)=>{
      resolve()
      throw 'error'
  }).catch((e)=>{
      console.log(`i catch you: ${e}`)  // 不會輸出
  }) 
  

0x005 finally

• 語法：

  p.finally(onFinally)

  • onFainally：回調

• 栗子：

  let promise=new Promise((resolve, reject)=>{
      setTimeout(()=>{
          resolve()
      }, 3000)
  }).then(()=>{
      console.log('resolve')
      throw 'error'
  }).catch((e)=>{
      console.log(`i catch you: ${e}`)
  }).finally(()=>{
      console.log('finally')
  })
  // resolve
  // i catch you error
  // finally