JavaScript Promise
閱讀時間約 3 分鐘
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
為什麼會看到廣告
20會員
161內容數
留言0
查看全部
你可能也想看
Javascript入門-Day10：套件套件（Package）是將程式或程式庫進行組織、分發和共享的一種方式。在軟體開發中，套件通常包含了相關的程式碼、資源文件和元數據，並提供了統一的名稱空間和版本管理。
2024-06-04
Javascript入門-Day9：例外處理當你在開發程式時，難免會遇到各種錯誤和異常情況。這些錯誤可能是因為代碼中的錯誤、外部資源無法訪問或其他不可預期的狀況。為了提高程式的可靠性、穩定性和可維護性，我們使用「例外處理」來處理這些異常情況。
2024-06-03
Javascript入門-Day8：物件導向本章節旨在介紹JavaScript中的物件導向編程。內容包括類別(Class)的定義和使用，建構子的作用，以及公開，私有，受保護(Protected)等不同訪問修飾符的概念。此外，還涵蓋了繼承、多型、封裝、介面、抽象類別、靜態類別、列舉、委派、Lambda表達式、泛型、反射等物件導向的主要觀念。
2024-06-02
Javascript入門-Day7：函數本章節旨在介紹JavaScript中函數的基本結構和使用方法，包括函數聲明、函數表達式、箭頭函數和匿名函數的定義方式，以及函數的呼叫、參數使用和返回值的處理方式。透過了解這些函數的基本概念和用法，可以幫助讀者更靈活地編寫和理解JavaScript代碼。
2024-06-02
JavaScript 程式札記 : PromisePromise 是 JavaScript 中用於非同步操作的一個物件。當你需要執行一個可能需要一些時間的操作，例如從伺服器取得資料，而你不希望整個程式都停下來等待這個操作完成，這時候就可以使用 Promise。
2023-09-20
JavaScript 面試考題：事件委託是什麼在搞清楚事件委託前必須先了解什麼是事件傳遞機制(Event Propagation)，也就是捕獲(capture)跟冒泡(bubble)，聽起來好像很難但是我昨天看完彭彭的直播課程(17:00開始)後就懂了！我寫成文章幫助記憶，也希望能幫助到大家，然後希望我面試會被考到。
2023-01-17
[JavaScript] 究竟什麼是Event loop?執行以上程式碼，然後看到了這個結果：
為什麼「延遲0秒」的函式寫在上方，但在console印出的結果，它還是被排在第二順位？
利用AC教材提供的youtube演講連結一窺究竟：
演講提供了更多JS的細節概念，身為JS新手的我還在消化，但若針對教案提出的問題來回答，加上利用google大神查到MDN的
2022-10-29
Javascript : Event Queue & Event Loop前言
這是第一次寫技術文章，但其實應該也只能說是蒐集很多資料並學習如何透過自己的話解釋的內容，並不能像其他大神可能分享一些很酷的技術，目標就單純是為了完成最後一週的作業(如下)。
走入非同步之前
執行環境(Execution Context)
執行環境堆疊 (Execution stack)
2022-08-16
JavaScript — var letJava script 中有其中兩種宣告分別是 var 跟 let
var
結果:
let
結果:
** let 是一種區塊的變數宣告像是 if else while for 即跳出區塊時就無法取得資料
2022-05-08