JavaScript 核心觀念(73) - 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 核心篇