JavaScript 核心觀念(73) - Promise - 為什麼需要 Promise

前言

接下來將會介紹 Promise 的部分,實戰開發上或許你已經有在使用,只是不知道那是使用 Promise 包裝而已。

為什麼需要 Promise

Promise 基本上就是要處理非同步的行為,那麼通常都會以 AJAX 當作範例,主要原因是 AJAX 是一個非同步行為,但不單純只是 AJAX 可以使用,只要是非同步行為一率都是可以使用 Promise 的。

這邊就先來看一段簡單的示範:

1
2
3
4
5
6
7
8
const data = [];

axios.get('https://randomuser.me/api/')
.then((res) => {
data = res.data.results;
})

console.log(data);

你可以試著思考一下 data 結果會是什麼

你可以看到結果是一個空的陣列,那麼想要解決這個問題的話,只需要改寫成以下即可:

1
2
3
4
5
6
7
const data = [];

axios.get('https://randomuser.me/api/')
.then((res) => {
data = res.data.results;
console.log(data);
})

那麼為什麼要 Promise 呢?假設我們在早期開發時大多都是使用 jQuery,而 jQuery 大多寫法都是以下:

1
2
3
4
5
$.ajax({
url: 'api'
}).done((res) => {
console.log(res);
})

若要取得第二筆資料的話,就必須這樣寫

1
2
3
4
5
6
7
8
9
10
$.ajax({
url: 'api'
}).done((res) => {
console.log(res);
$.ajax({
url: 'api'
}).done((res) => {
console.log(res);
})
})

我們可以看出相當的麻煩,而若使用 Promise 的話,就只需要 return 就可以了:

1
2
3
4
5
6
7
8
9
axios.get('https://randomuser.me/api/')
.then((res) => {
data = res.data.results;
console.log(data);
return axios.get('https://randomuser.me/api/')
}).then((res) => {
data = res.data.results;
console.log(data);
})

因此 Promise 可以解決掉部分的 Callback Hell (回呼地獄)等,那麼這一篇也僅僅簡單說明一下早期寫法與 Promise 寫法差異。

參考文獻

Liker 讚賞

這篇文章如果對你有幫助,你可以花 30 秒登入 LikeCoin 並點擊下方拍手按鈕(最多五下)免費支持與牡蠣鼓勵我。
或者你也可以考慮請我喝一杯咖啡

Google AD

撰寫一篇文章其實真的很花時間,如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話,我會非常感謝你 ヽ(・∀・)ノ