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 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Hi 大家好，我是Ethan😊
相近大家都知道保濕是皮膚保養中最基本，也是最重要的一步。無論是在畫室裡長時間對著畫布，還是在旅途中面對各種氣候變化，保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水，還能提升後續保養品的吸收效率。
曾經，我的保養程序簡單到只包括清潔和隨意上乳液
工作上固定頻率會收到User提供的設定需求資訊，檔案大多為excel的格式.xlsx或.xls，需要擷取內容的參數資訊，轉換撰寫sql語法寫入資料庫進行操作。
既然格式都是固定的，何不動手寫個小工具，一鍵完成轉換呢？
套件（Package）是將程式或程式庫進行組織、分發和共享的一種方式。在軟體開發中，套件通常包含了相關的程式碼、資源文件和元數據，並提供了統一的名稱空間和版本管理。
當你在開發程式時，難免會遇到各種錯誤和異常情況。這些錯誤可能是因為代碼中的錯誤、外部資源無法訪問或其他不可預期的狀況。為了提高程式的可靠性、穩定性和可維護性，我們使用「例外處理」來處理這些異常情況。
本章節旨在介紹JavaScript中的物件導向編程。內容包括類別(Class)的定義和使用，建構子的作用，以及公開，私有，受保護(Protected)等不同訪問修飾符的概念。此外，還涵蓋了繼承、多型、封裝、介面、抽象類別、靜態類別、列舉、委派、Lambda表達式、泛型、反射等物件導向的主要觀念。
本章節旨在介紹JavaScript中函數的基本結構和使用方法，包括函數聲明、函數表達式、箭頭函數和匿名函數的定義方式，以及函數的呼叫、參數使用和返回值的處理方式。透過了解這些函數的基本概念和用法，可以幫助讀者更靈活地編寫和理解JavaScript代碼。
Promise 是 JavaScript 中用於非同步操作的一個物件。當你需要執行一個可能需要一些時間的操作，例如從伺服器取得資料，而你不希望整個程式都停下來等待這個操作完成，這時候就可以使用 Promise。
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Hi 大家好，我是Ethan😊
相近大家都知道保濕是皮膚保養中最基本，也是最重要的一步。無論是在畫室裡長時間對著畫布，還是在旅途中面對各種氣候變化，保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水，還能提升後續保養品的吸收效率。
曾經，我的保養程序簡單到只包括清潔和隨意上乳液
工作上固定頻率會收到User提供的設定需求資訊，檔案大多為excel的格式.xlsx或.xls，需要擷取內容的參數資訊，轉換撰寫sql語法寫入資料庫進行操作。
既然格式都是固定的，何不動手寫個小工具，一鍵完成轉換呢？
套件（Package）是將程式或程式庫進行組織、分發和共享的一種方式。在軟體開發中，套件通常包含了相關的程式碼、資源文件和元數據，並提供了統一的名稱空間和版本管理。
當你在開發程式時，難免會遇到各種錯誤和異常情況。這些錯誤可能是因為代碼中的錯誤、外部資源無法訪問或其他不可預期的狀況。為了提高程式的可靠性、穩定性和可維護性，我們使用「例外處理」來處理這些異常情況。
本章節旨在介紹JavaScript中的物件導向編程。內容包括類別(Class)的定義和使用，建構子的作用，以及公開，私有，受保護(Protected)等不同訪問修飾符的概念。此外，還涵蓋了繼承、多型、封裝、介面、抽象類別、靜態類別、列舉、委派、Lambda表達式、泛型、反射等物件導向的主要觀念。
本章節旨在介紹JavaScript中函數的基本結構和使用方法，包括函數聲明、函數表達式、箭頭函數和匿名函數的定義方式，以及函數的呼叫、參數使用和返回值的處理方式。透過了解這些函數的基本概念和用法，可以幫助讀者更靈活地編寫和理解JavaScript代碼。
Promise 是 JavaScript 中用於非同步操作的一個物件。當你需要執行一個可能需要一些時間的操作，例如從伺服器取得資料，而你不希望整個程式都停下來等待這個操作完成，這時候就可以使用 Promise。