提姆寫程式

0%

JS 核心觀念筆記 - Promise 基礎認識

發表於 更新於 分類於 Disqus：
什麼是 promise

core

Promise 方法是解決非同步事件的語法，因非同步的行為不知道什麼時候才會執行完畢，之前使用過 axios 套件，就是包裝過後的 promise，如下方程式碼。

1
2
3
axios.get(dataUrl).then((res) => {
  console.log(res);
});

promise 處理非同步事件的流程

promise

如上圖所示，

  1. 用 promise 方法的時候會先進入 pending 未確認狀態。
  2. 等資料取得後會進入 sattled 已確認狀態。
  3. 得到結果後，若取得資料會進入已實現狀態 fulfilled，得到 resolve (解決) 的參數回傳一個結果，並用 then() 方法承接資料。
  4. 若沒有獲得資料或取得資料失敗，會進入 Rejected 已否決的狀態，得到 reject 的參數回傳一個結果，使用 catch() 的方法來接收資料。

一次只會得到一個結果。

使用 promise 的好處

  1. 寫法一致，成功就用 then()，失敗就是 catch()。
  2. 不會變巢狀寫法而落入 callback 地獄。
  3. 可以同步執行。

promise 原理

promise 是 ES6 新的語法，也是宣告一個新的物件方法，其原理如下方程式碼：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function promiseFn(num) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (num) {
        resolve("OK");
      } else {
        reject(new Error("error"));
      }
    }, 0);
  });
}

promiseFn(1)
  .then((res) => {
    console.log(res);
  })
  .catch((res) => {
    console.error(err);
  });
  1. 建立一個 promiseFn 的函式，其內直接回傳一個 promise 物件。
  2. 並帶入 resolve 與 reject 的兩個參數，當作接收回傳的結果。
  3. 因為是非同步，所以給予一個 setTimeout 的函式，去執行接收後的結果。
  4. 把 promiseFn() 此函式用 then() 與 catch() 的方法，來取得成功或失敗的值。

promise basic