JavaScript Promise

更新於 發佈於 閱讀時間約 4 分鐘

promise是ES6才有的,它是一種非同步的技術,使用它除了可以在background處理一些事情以外,還可以增加程式碼的可維護性,以下用一些例子來清楚的舉例:

一般我們ajax可能會這樣寫:


改用promise可以寫成這樣:


console如下,從行數來看可以發現,Promise是非同步的:

raw-image

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:

raw-image


這種用promise chain的寫法看起來好維護多了,不會像上面一樣看起來一層又包一層!

上述是data1資料成功response之後再去抓data2的寫法!

假設您要的是兩包data確定都撈回來後,要做一些事情,用promise可以寫成這樣,使用Promise.all:


console:

raw-image

這樣寫起來很乾淨也好維護,假如沒有用promise去做,要自己寫一些程式去判斷是否兩個ajax都success,寫這種判斷的程式碼,看起來會很髒。

#note: Promise.race則是只要有其中一個promise完成就觸發。

以下再舉一個例子!

假設您有一段業務邏輯,需要花比較多時間處理,也可以使用promise來達到非同步,避免main thread lock住:


console:

raw-image

總結:

promise是一種非同步的技術,想想看promise的意思就是約定/承諾,可以把它理解成: 「我們約定好要做這件事情,但做這件事有可能成功、失敗,我們可以事後來檢視它是成功還是失敗,以及假如是成功的話,then要做什麼事情? 失敗的話又要做什麼事情?」

  1. Promise可以在非同步的在背景處理一些事情,避免在main thread做。
  2. Promise的誕生可以提高程式碼的可維護性,例如本文提到的ajax例子,想想看,在前後端分離或SPA的project裡面,ajax是一定會用到的技術,而本文只簡單舉例了兩層的ajax,在更複雜的應用裡,甚至有可能包了10, 20層…. 若是用以前的寫法,那種程式碼是很噁心的,後面接手的工程師應該會抓狂吧?XD

#note: IE 11不支援Promise,如下圖:

raw-image

解決方法:

使用polyfill cdn:

raw-image

據說可以support IE 8+ ? 有興趣可以試試看,我是沒特別試過啦XD

參考: https://www.npmjs.com/package/promise-polyfill

留言
avatar-img
留言分享你的想法!
avatar-img
Vic Lin的沙龍
21會員
161內容數
Vic Lin的沙龍的其他內容
2023/08/13
父元件 傳遞方法使用@ <template>    ...    <Login @modalClose="modalClose"/> ... </template> <script setup>     const _modal = ref();     function m
2023/08/13
父元件 傳遞方法使用@ <template>    ...    <Login @modalClose="modalClose"/> ... </template> <script setup>     const _modal = ref();     function m
2023/03/25
前情提要 由於我的筆電已經用了10年,無法再戰下去了,且有預算考量,加上使用電腦幾乎都是定點,只有偶爾回家的時候會需要攜帶,因此最終選擇了迷你電腦,體積小不占空間,又方便攜帶,剛好符合我的需求。 菜單 由於這台無法裝獨顯,所以CPU的部分選擇 AMD R5 3400G(含Vega 11內
Thumbnail
2023/03/25
前情提要 由於我的筆電已經用了10年,無法再戰下去了,且有預算考量,加上使用電腦幾乎都是定點,只有偶爾回家的時候會需要攜帶,因此最終選擇了迷你電腦,體積小不占空間,又方便攜帶,剛好符合我的需求。 菜單 由於這台無法裝獨顯,所以CPU的部分選擇 AMD R5 3400G(含Vega 11內
Thumbnail
2023/03/10
Nuxt3中可使用useFetch來獲取數據,不須再引用axios,相當方便: 本筆記參考: https://juejin.cn/post/7104071421160063012 https://juejin.cn/post/7086472647575339045
2023/03/10
Nuxt3中可使用useFetch來獲取數據,不須再引用axios,相當方便: 本筆記參考: https://juejin.cn/post/7104071421160063012 https://juejin.cn/post/7086472647575339045
看更多
你可能也想看
Thumbnail
我的「媽」呀! 母親節即將到來,vocus 邀請你寫下屬於你的「媽」故事——不管是紀錄爆笑的日常,或是一直想對她表達的感謝,又或者,是你這輩子最想聽她說出的一句話。 也歡迎你曬出合照,分享照片背後的點點滴滴 ♥️ 透過創作,將這份情感表達出來吧!🥹
Thumbnail
我的「媽」呀! 母親節即將到來,vocus 邀請你寫下屬於你的「媽」故事——不管是紀錄爆笑的日常,或是一直想對她表達的感謝,又或者,是你這輩子最想聽她說出的一句話。 也歡迎你曬出合照,分享照片背後的點點滴滴 ♥️ 透過創作,將這份情感表達出來吧!🥹
Thumbnail
分享一個有趣的套件,名為 await-to-js。 可以讓 Promise 與 await 的寫法更簡潔。
Thumbnail
分享一個有趣的套件,名為 await-to-js。 可以讓 Promise 與 await 的寫法更簡潔。
Thumbnail
AJAX(Asynchronous JavaScript And XML)為JavaScript和XML的非同步技術,可以讓瀏覽器建立快速、更加和容易使用的操作介面。AJAX核心技術是非同步的HTTP請求(Asynchronous HTTP Requests),除了第一次載入網頁外,HTTP請求是在
Thumbnail
AJAX(Asynchronous JavaScript And XML)為JavaScript和XML的非同步技術,可以讓瀏覽器建立快速、更加和容易使用的操作介面。AJAX核心技術是非同步的HTTP請求(Asynchronous HTTP Requests),除了第一次載入網頁外,HTTP請求是在
Thumbnail
歡迎來到 React 白話文運動第三篇,今天我們將深入探討 JavaScript 中的非同步操作,並介紹兩個重要的關鍵字:Async 與 Await。在這篇文章中,我們將透過實例演示非同步操作的概念,以及如何使用 Promise、Fetch、Async 和 Await 來更有效地處理非同步程式。
Thumbnail
歡迎來到 React 白話文運動第三篇,今天我們將深入探討 JavaScript 中的非同步操作,並介紹兩個重要的關鍵字:Async 與 Await。在這篇文章中,我們將透過實例演示非同步操作的概念,以及如何使用 Promise、Fetch、Async 和 Await 來更有效地處理非同步程式。
Thumbnail
Web Workers主要提供簡單的API讓網頁在背景執行緒中執行程式而不干擾使用者的操作。 javascript主要功能是與user操作頁面互動及操作dom,試想若使用多執行緒的概念,那麼一個動作是新增至某個dom節點,另一個動作則是修改該dom節點,此時瀏覽器應該使用哪個動作為準? 所以為了避免
Thumbnail
Web Workers主要提供簡單的API讓網頁在背景執行緒中執行程式而不干擾使用者的操作。 javascript主要功能是與user操作頁面互動及操作dom,試想若使用多執行緒的概念,那麼一個動作是新增至某個dom節點,另一個動作則是修改該dom節點,此時瀏覽器應該使用哪個動作為準? 所以為了避免
Thumbnail
執行以上程式碼,然後看到了這個結果: 為什麼「延遲0秒」的函式寫在上方,但在console印出的結果,它還是被排在第二順位? 利用AC教材提供的youtube演講連結一窺究竟: 演講提供了更多JS的細節概念,身為JS新手的我還在消化,但若針對教案提出的問題來回答,加上利用google大神查到MDN的
Thumbnail
執行以上程式碼,然後看到了這個結果: 為什麼「延遲0秒」的函式寫在上方,但在console印出的結果,它還是被排在第二順位? 利用AC教材提供的youtube演講連結一窺究竟: 演講提供了更多JS的細節概念,身為JS新手的我還在消化,但若針對教案提出的問題來回答,加上利用google大神查到MDN的
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News