JavaScript Promise
promise是ES6才有的，它是一種非同步的技術，使用它除了可以在background處理一些事情以外，還可以增加程式碼的可維護性，以下用一些例子來清楚的舉例:
一般我們ajax可能會這樣寫:
改用promise可以寫成這樣:
console如下，從行數來看可以發現，Promise是非同步的:
new了promise就會馬上執行，執行成功則呼叫resolve, 失敗呼叫reject.
其中.then則表示這個promise成功的話要做什麼? (當promise內呼叫resolve時，則then就會執行)
.catch則是用來捕捉promise fail(當promise內呼叫reject時，則catch就會執行)
再來看一個例子!
假設您今天ajax去拿data1 success後，需要再去抓另一個api的資料。以前我們可能會這樣寫:
這樣寫在第一個ajax的success callback function裡面又包一個ajax，而這個ajax又有callback，不覺得很亂很難維護嗎?
用promise我們可以寫成這樣:
console:
這種用promise chain的寫法看起來好維護多了，不會像上面一樣看起來一層又包一層!
上述是data1資料成功response之後再去抓data2的寫法!
假設您要的是兩包data確定都撈回來後，要做一些事情，用promise可以寫成這樣，使用Promise.all:
console:
這樣寫起來很乾淨也好維護，假如沒有用promise去做，要自己寫一些程式去判斷是否兩個ajax都success，寫這種判斷的程式碼，看起來會很髒。
#note: Promise.race則是只要有其中一個promise完成就觸發。
以下再舉一個例子!
假設您有一段業務邏輯，需要花比較多時間處理，也可以使用promise來達到非同步，避免main thread lock住:
console:
總結: promise是一種非同步的技術，想想看promise的意思就是約定/承諾，可以把它理解成: 「我們約定好要做這件事情，但做這件事有可能成功、失敗，我們可以事後來檢視它是成功還是失敗，以及假如是成功的話，then要做什麼事情? 失敗的話又要做什麼事情?」
- Promise可以在非同步的在背景處理一些事情，避免在main thread做。
- Promise的誕生可以提高程式碼的可維護性，例如本文提到的ajax例子，想想看，在前後端分離或SPA的project裡面，ajax是一定會用到的技術，而本文只簡單舉例了兩層的ajax，在更複雜的應用裡，甚至有可能包了10, 20層…. 若是用以前的寫法，那種程式碼是很噁心的，後面接手的工程師應該會抓狂吧?XD
#note: IE 11不支援Promise，如下圖:
解決方法:
使用polyfill cdn:
據說可以support IE 8+ ? 有興趣可以試試看，我是沒特別試過啦XD
參考:
分享至
成為作者繼續創作的動力吧！
© 2024 vocus All rights reserved.