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 追蹤
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
美國總統大選只剩下三天， 我們觀察一整週民調與金融市場的變化（包含賭局）， 到本週五下午3:00前為止， 誰是美國總統幾乎大概可以猜到60-70%的機率， 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
工作上固定頻率會收到User提供的設定需求資訊，檔案大多為excel的格式.xlsx或.xls，需要擷取內容的參數資訊，轉換撰寫sql語法寫入資料庫進行操作。
既然格式都是固定的，何不動手寫個小工具，一鍵完成轉換呢？
套件（Package）是將程式或程式庫進行組織、分發和共享的一種方式。在軟體開發中，套件通常包含了相關的程式碼、資源文件和元數據，並提供了統一的名稱空間和版本管理。
當你在開發程式時，難免會遇到各種錯誤和異常情況。這些錯誤可能是因為代碼中的錯誤、外部資源無法訪問或其他不可預期的狀況。為了提高程式的可靠性、穩定性和可維護性，我們使用「例外處理」來處理這些異常情況。
本章節旨在介紹JavaScript中的物件導向編程。內容包括類別(Class)的定義和使用，建構子的作用，以及公開，私有，受保護(Protected)等不同訪問修飾符的概念。此外，還涵蓋了繼承、多型、封裝、介面、抽象類別、靜態類別、列舉、委派、Lambda表達式、泛型、反射等物件導向的主要觀念。
本章節旨在介紹JavaScript中函數的基本結構和使用方法，包括函數聲明、函數表達式、箭頭函數和匿名函數的定義方式，以及函數的呼叫、參數使用和返回值的處理方式。透過了解這些函數的基本概念和用法，可以幫助讀者更靈活地編寫和理解JavaScript代碼。
Promise 是 JavaScript 中用於非同步操作的一個物件。當你需要執行一個可能需要一些時間的操作，例如從伺服器取得資料，而你不希望整個程式都停下來等待這個操作完成，這時候就可以使用 Promise。
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
美國總統大選只剩下三天， 我們觀察一整週民調與金融市場的變化（包含賭局）， 到本週五下午3:00前為止， 誰是美國總統幾乎大概可以猜到60-70%的機率， 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
工作上固定頻率會收到User提供的設定需求資訊，檔案大多為excel的格式.xlsx或.xls，需要擷取內容的參數資訊，轉換撰寫sql語法寫入資料庫進行操作。
既然格式都是固定的，何不動手寫個小工具，一鍵完成轉換呢？
套件（Package）是將程式或程式庫進行組織、分發和共享的一種方式。在軟體開發中，套件通常包含了相關的程式碼、資源文件和元數據，並提供了統一的名稱空間和版本管理。
當你在開發程式時，難免會遇到各種錯誤和異常情況。這些錯誤可能是因為代碼中的錯誤、外部資源無法訪問或其他不可預期的狀況。為了提高程式的可靠性、穩定性和可維護性，我們使用「例外處理」來處理這些異常情況。
本章節旨在介紹JavaScript中的物件導向編程。內容包括類別(Class)的定義和使用，建構子的作用，以及公開，私有，受保護(Protected)等不同訪問修飾符的概念。此外，還涵蓋了繼承、多型、封裝、介面、抽象類別、靜態類別、列舉、委派、Lambda表達式、泛型、反射等物件導向的主要觀念。
本章節旨在介紹JavaScript中函數的基本結構和使用方法，包括函數聲明、函數表達式、箭頭函數和匿名函數的定義方式，以及函數的呼叫、參數使用和返回值的處理方式。透過了解這些函數的基本概念和用法，可以幫助讀者更靈活地編寫和理解JavaScript代碼。
Promise 是 JavaScript 中用於非同步操作的一個物件。當你需要執行一個可能需要一些時間的操作，例如從伺服器取得資料，而你不希望整個程式都停下來等待這個操作完成，這時候就可以使用 Promise。