淺淺淺談 Javascript - promise(一) : callback function

Appx 實習心得(一)

Brian Hsieh |謝杰修
appxtech
3 min readDec 7, 2019

--

Promise感覺很難?await是base on Promise,那是不是更難使用?

在進公司前,對於promise的理解一直是一知半解的狀態,只知道如果結果跑不出來,或是不符合自己的期待,十之八九都是因為沒有加Promise的問題(前提是你寫的是對的,吧?)

網路上爬了許多教學,也在書局看過相關的文章,對Promise還是似懂非懂(當然,我現在懂了,不然不會在這邊分享自己的心得。)
最後還是腳踏實地的上戰場使用,才漸漸發現了承諾的美(?

要理解promise,需要循序漸進

  1. 理解同步與非同步函數
  2. 理解callback函數
  3. promise
  4. await

在想著要如何分享時看了一些網路上的文章,覺得這篇文章最適合想理解的初學者: https://scotch.io/tutorials/javascript-promises-for-dummies,所以我接下來的文章會大部分採納於此

為什麼要使用Promise?

回呼函數callback function

在進入promise前,必須先提到回呼函數callback function
(這邊會跳過同步非同步的部分,有興趣的朋友可以自己先去理解再回來)

回呼函式(callback function)是指能藉由參數(argument)通往另一個函式的函式。它會在外部函式內調用、以完成某些事情。

以下是簡單的例子:

const greeting = (name) => { //這是一個normal function
alert('Hello', name);
}
const processUserInput = (callback) => { //這是一個callback function
let name = prompt('輸入你的名字:');
callback(name);
}
processUserInput(greeting);

回呼函數通常是用在延續非同步行動完成後的程式執行,也稱作非同步回呼(asynchronous callbacks)。

舉例來說,我們可以在一個非同步函式中呼叫第三方的api,等到api回傳我們要的資料後,才繼續往下執行。
(至於為什麼要這樣寫程式才會等?這就不是這篇文章的範疇了><)

那為什麼不都用回呼函式就好了,要用Promise呢?
如果一隻函式中需要從許多api中撈值會長什麼樣子,這邊就有請我們著名的回呼地獄(callback hell)為您解說

callback hell A.K.A. pyramid of doom

看的很累嗎,這時候就是promise展露頭角的時候了!

未完待續...

referrence:
https://developer.mozilla.org/zh-TW/docs/Glossary/Callback_function
https://scotch.io/tutorials/javascript-promises-for-dummies
你懂JavaScript 嗎?#23 Callback | Summer。桑莫。夏天

--

--