10個助你理解 Promise 的代碼片段

在開發中,瞭解 JavaScript 和 Promise 基礎,有助於提高我們的編碼技能,今天,我們一起來看看下面的 10 片段,相信看完這 10 個片段有助於我們對 Promise 的理解。

片段1:

10個助你理解 Promise 的代碼片段


Promise同步執行,promise.then異步執行。

片段2:

10個助你理解 Promise 的代碼片段


promise 有三種不同的狀態:

  • pending
  • fulfilled
  • rejected

一旦狀態更新,pending->fulfilled 或pending->rejected,就可以再次更改它。prom1與prom2不同,並且兩者都返回新的Promise狀態。

片段3

10個助你理解 Promise 的代碼片段

即使reject後有一個resolve調用,也只能執行一次resolve或reject,剩下的不會執行。

片段 4:

10個助你理解 Promise 的代碼片段

Promises 可以鏈接調用,當提到鏈接調用 時,我們通常會考慮要返回this,但Promises不用。每次 promise 調用.then或.catch時,默認都會返回一個新的 promise,從而實現鏈接調用。

片段 5:

10個助你理解 Promise 的代碼片段

promise 的 .then或.catch可以被多次調用,但是此處Promise構造函數僅執行一次。換句話說,一旦promise的內部狀態發生變化並獲得了一個值,則隨後對.then或.catch的每次調用都將直接獲取該值。

片段 6

10個助你理解 Promise 的代碼片段

.then或.catch返回的值不能是promise本身,否則將導致無限循環。

片段 7:

10個助你理解 Promise 的代碼片段

在.then或.catch中返回錯誤對象不會引發錯誤,因此後續的.catch不會捕獲該錯誤對象,需要更改為以下對象之一:

<code>return Promise.reject(new Error('error')) throw new Error('error')/<code>

因為返回任何非promise 值都將包裝到一個Promise對象中,也就是說,返回new Error('error')等同於返回Promise.resolve(new Error('error'))。

片段 8:

<code>Promise.resolve(1)
  .then(2)
  .then(Promise.resolve(3))
  .then(console.log)

  // 1/<code>

.then或.catch的參數應為函數,而傳遞非函數將導致值的結果被忽略,例如.then(2)或.then(Promise.resolve(3)。

片段 9:

10個助你理解 Promise 的代碼片段


.then可以接受兩個參數,第一個是處理成功的函數,第二個是處理錯誤的函數。.catch是編寫.then的第二個參數的便捷方法,但是在使用中要注意一點:.then第二個錯誤處理函數無法捕獲第一個成功函數和後續函數拋出的錯誤。.catch捕獲先前的錯誤。當然,如果要重寫,下面的代碼可以起作用:

10個助你理解 Promise 的代碼片段

片段 10:

10個助你理解 Promise 的代碼片段


process.nextTick和promise.then都屬於微任務,而setImmediate屬於宏任務,它在事件循環的檢查階段執行。在事件循環的每個階段(宏任務)之間執行微任務,並且事件循環的開始執行一次。


原文:http://jamesknelson.com/grokking-es6-promises-the-four-functions-you-need-to-avoid-callback-hell/


分享到:


相關文章: