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

發表於 2021-12-08 分類於 JavaScript

Google AD

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

Liker 讚賞

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

｜

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

前言

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

為什麼需要 Promise

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

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

const data = [];

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

console.log(data);

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

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

const data = [];

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

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

$.ajax({
  url: 'api'
}).done((res) => {
  console.log(res);
})

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

$.ajax({
  url: 'api'
}).done((res) => {
  console.log(res);
  $.ajax({
    url: 'api'
  }).done((res) => {
    console.log(res);
  })
})

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

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 寫法差異。

參考文獻

JavaScript 核心篇