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
為什麼會看到廣告
21會員
161內容數
留言0
查看全部
你可能也想看
Google News 追蹤
大家好，我是woody，是一名料理創作者，非常努力地在嘗試將複雜的料理簡單化，讓大家也可以體驗到料理的樂趣而我也非常享受料理的過程，今天想跟大家聊聊，除了料理本身，料理創作背後的成本。
哈囉～很久沒跟各位自我介紹一下了～
大家好～我是爺恩
我是一名圖文插畫家，有追蹤我一段時間的應該有發現爺恩這個品牌經營了好像.....快五年了(汗)時間過得真快！隨著時間過去，創作這件事好像變得更忙碌了，也很開心跟很多厲害的創作者以及廠商互相合作幫忙，還有最重要的是大家的支持與陪伴🥹。
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
分享一個有趣的套件，名為 await-to-js。
可以讓 Promise 與 await 的寫法更簡潔。
※ 非同步概念總複習
為什麼要使用 Promise？
在 JavaScript 開發中，處理非同步操作是常見需求，涉及如文件讀寫、數據庫查詢或網路請求等耗時任務。傳統的回調方式可能導致代碼結構混亂，稱為「回調地獄」，難以維護和理解。
Promise 是解決這問題的方法。它是一個物件(objec
認識 async/await基本概念：
async 的本質是 promise 的語法糖 ，只要 function 標記為 async，就表示裡頭可以撰寫 await 的同步語法，而 await 顧名思義就是「等待」，它會確保一個 promise 物件都解決 ( resolve ) 或出錯 ( re
什麼是 Promise.all？
在有多個 Promise 的時候，使用 Promise.all 可以確保「所有的 Promise 都執行完以後，才進入 then」。
Promise.all 語法結構：
Promise.all 接受的參數是陣列形式。
什麼時候要使用 Promise.all？
※ Promise基本介紹
什麼是 Promise？
Promise 是 JavaScript 的一個構造函式，用於創建表示非同步操作的物件實例。使用 new Promise() 時，你會創建一個包含非同步操作的實例，這個實例可以透過其繼承的方法如 then(), catch(), 和 fina
※ 同步概念：
單純地「由上而下」執行程式碼，而且一次只執行一件事，也就是「按順序執行，一個動作結束才能切換到下一個」。缺點是你需要「等待」事情執行完畢，才能繼續往下走。
※ 非同步概念：
盡可能讓主要的執行程序不需要停下來等待，若遇到要等待的事情，就發起一個「非同步處理」，讓主程序繼續執行，
※ 函式基礎介紹：
※ JavaScript 特殊的函式特性：
函式可以當成值來傳遞 (可以放進變數或放進物件)
函式可以當成函式的參數
callback - 在特定事件中觸發函式 (非同步特性)
※ 函式的基本寫法：
※ 調用 (invoke) 函式：
"調用" 意指呼叫或執行
非同步程式設計(Asynchronous programming) 或是簡單的稱之為 async，它是一種並發程式模型(concurrent programming model)，其目的就是讓多個任務能同時在作業系統的執行緒上執行，並透過 async/.await 保留同步。
為什麼需要非同步？ 我們在「【Web微知識系列】 Web Workers」有介紹到在瀏覽器可執行腳本Javascript環境底下如何完成非同步的操作， 主要是為了讓任務更有效率的進行， 不會因為一個非常耗時的工作堵塞住整個服務， 導致無法服務他人的窘境。
大家應該經常在餐廳裡會看到服務員協
大家好，我是woody，是一名料理創作者，非常努力地在嘗試將複雜的料理簡單化，讓大家也可以體驗到料理的樂趣而我也非常享受料理的過程，今天想跟大家聊聊，除了料理本身，料理創作背後的成本。
哈囉～很久沒跟各位自我介紹一下了～
大家好～我是爺恩
我是一名圖文插畫家，有追蹤我一段時間的應該有發現爺恩這個品牌經營了好像.....快五年了(汗)時間過得真快！隨著時間過去，創作這件事好像變得更忙碌了，也很開心跟很多厲害的創作者以及廠商互相合作幫忙，還有最重要的是大家的支持與陪伴🥹。
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
分享一個有趣的套件，名為 await-to-js。
可以讓 Promise 與 await 的寫法更簡潔。
※ 非同步概念總複習
為什麼要使用 Promise？
在 JavaScript 開發中，處理非同步操作是常見需求，涉及如文件讀寫、數據庫查詢或網路請求等耗時任務。傳統的回調方式可能導致代碼結構混亂，稱為「回調地獄」，難以維護和理解。
Promise 是解決這問題的方法。它是一個物件(objec
認識 async/await基本概念：
async 的本質是 promise 的語法糖 ，只要 function 標記為 async，就表示裡頭可以撰寫 await 的同步語法，而 await 顧名思義就是「等待」，它會確保一個 promise 物件都解決 ( resolve ) 或出錯 ( re
什麼是 Promise.all？
在有多個 Promise 的時候，使用 Promise.all 可以確保「所有的 Promise 都執行完以後，才進入 then」。
Promise.all 語法結構：
Promise.all 接受的參數是陣列形式。
什麼時候要使用 Promise.all？
※ Promise基本介紹
什麼是 Promise？
Promise 是 JavaScript 的一個構造函式，用於創建表示非同步操作的物件實例。使用 new Promise() 時，你會創建一個包含非同步操作的實例，這個實例可以透過其繼承的方法如 then(), catch(), 和 fina
※ 同步概念：
單純地「由上而下」執行程式碼，而且一次只執行一件事，也就是「按順序執行，一個動作結束才能切換到下一個」。缺點是你需要「等待」事情執行完畢，才能繼續往下走。
※ 非同步概念：
盡可能讓主要的執行程序不需要停下來等待，若遇到要等待的事情，就發起一個「非同步處理」，讓主程序繼續執行，
※ 函式基礎介紹：
※ JavaScript 特殊的函式特性：
函式可以當成值來傳遞 (可以放進變數或放進物件)
函式可以當成函式的參數
callback - 在特定事件中觸發函式 (非同步特性)
※ 函式的基本寫法：
※ 調用 (invoke) 函式：
"調用" 意指呼叫或執行
非同步程式設計(Asynchronous programming) 或是簡單的稱之為 async，它是一種並發程式模型(concurrent programming model)，其目的就是讓多個任務能同時在作業系統的執行緒上執行，並透過 async/.await 保留同步。
為什麼需要非同步？ 我們在「【Web微知識系列】 Web Workers」有介紹到在瀏覽器可執行腳本Javascript環境底下如何完成非同步的操作， 主要是為了讓任務更有效率的進行， 不會因為一個非常耗時的工作堵塞住整個服務， 導致無法服務他人的窘境。
大家應該經常在餐廳裡會看到服務員協