Promise物件-1

Randy Chen
Randy Chen
Published in
Mar 11, 2021
source:unsplash
source: unsplash

這邊我想要記錄一下,目前讀到的Promise物件的內容。
Promise物件的前因後果
首先,因為JS是一個非同步的語言,及代表程式碼裡面非同步函式會同步被觸發,但是,今天我們若想要達到控制函式被觸發的順序的話,
勢必得把某些函式當作其他函式的參數,等到次序較前面的函式做完之後,才去做傳到這些函式中的那些次序比較後面的函式。
我知道上面這個敘述看完之後,還是會目煞煞XDD,但是,在這邊我想要先說明一下非同步和同步環境的差別,接著,再回來用一個範例
來體現我上面再講什麼東西。

非同步 v.s 同步
因為中文翻譯的關係,字面上的解讀也讓我搞混同步不就代表所有東西都是一起觸發嗎?! 但恰好相反
非同步
假設今天要做一道花枝炒飯。
今天這是一間大飯店,它有多位廚師,其中一位廚師處理花枝,另外一位廚師處理炒飯的部分,
所以,在這個過程中可能花枝先煮好,或者,炒飯先炒好,但沒關係,等到兩道菜都做好後,再一起裝盤出菜。

所以,非同步處理事件的流程,並不會其中一個步驟而被卡住,這個就是非同步的概念。

同步
一樣要做花枝炒飯,
但這是一間小店,它只有一位廚師,所以,他得先處理完花枝後,再接著處理炒飯的部分。
所以,只能等到一項項目處理完之後,才能再接著處理下一個項目。

所以,同步的處理事件的概念是,先完成1之後,才能再依序處理2, 3, 4…。
所以,

同步這個名詞乍看真的很像全部一起處理,但其實它是一步一步,按部就班的處理。
非同步則是可以同時處理多件事情,不用互等。

ok,介紹完非同步和同步之後,我這邊就來舉個程式碼的例子,來體現我第一段所講的內容。

https://codepen.io/RandyChen/embed/oNYJLrM?height=265&theme-id=light&default-tab=js,result

以上這個範例,你可以看到js的部分,我們將funcB當作funcA的參數,等到funcA執行完之後,才去執行傳入的參數callback,也就是funcB,那也就可以透過這種方式
來控制函式之間的執行順序。

Callback Hell
但是,當我們要控制的函式一多,要控制它們之間的作用順序的話,就會變成要傳來傳去,最終變成著名的Callback Hell(回呼地獄XDD),
那這個時候,我們就可以使用Promise這項技術來幫我們有效且簡單的達到控制函式作用順序的效果,並有效的解決Callback Hell的窘境囉~~

那這一篇就先記錄一下js的作用環境,然後,它會造成什麼問題,而為什麼我們需要用Promise的來龍去脈,下一篇在紀錄Promise物件怎麼使用囉~

--

--

Randy Chen
Randy Chen

Keep fertilizing it, Keep watering it, Keep marching on