JS 觀念 - Promise 非同步

Promise 物件代表一個即將完成、或失敗的非同步操作，以及它所產生的值。

非同步觀念

非同步行為會在所有程式碼執行完後才執行，因此看到非同步行為，執行順序就放最後。

就算 setTimeout 設定 0 秒，一樣不會改變它最後執行的順序。

function getData() {
  setTimeout(() => {
    console.log('... 已取得遠端資料');
  }, 0);
}
// 請問取得資料的順序為何
const component = {
  init() {
    console.log(1); // 順序 1
    getData(); // 順序 3
    console.log(2); // 順序 2
  }
}
component.init();

consle 結果 :

1
2
3

1
2
... 已取得遠端資料'

而 Promise 是為了解決傳統非同步語法難以建構及管理的問題。

Promise

const promiseSetTimeout = (status) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (status) {
        resolve('promiseSetTimeout 成功')
      } else {
        reject('promiseSetTimeout 失敗')
      }
    }, 0);
  })
}

Promise 基礎應用

promiseSetTimeout(true)
  .then(res => {
    console.log(res);
  })

consle 結果 :

1	promiseSetTimeout 成功

Promise 串接

promiseSetTimeout(true)
  .then(res => {
    console.log(1, res);
    return promiseSetTimeout(true)
  })
  .then(res => {
    console.log(2, res);
  })

consle 結果 :

1 2	1 "promiseSetTimeout 成功" 2 "promiseSetTimeout 成功"

Promise 失敗捕捉

promiseSetTimeout 成功的話跑 then ，失敗的話跑 catch

promiseSetTimeout(false)
  .then(res => {
    console.log(res);
  })
  .catch(err => {
    console.log(err);
  })

consle 結果 :

1	promiseSetTimeout 失敗

Promise 元件運用

把非同步資料寫回 data

const component = {
  data: {},
  init() {
    promiseSetTimeout(true)
      .then(res => {
        this.data.res = res; // 非同步資料寫回 data
        console.log(this);
        console.log(this.data.res);
      })
  }
}

component.init();

consle 結果 :

使用 axios 套件串接遠端 API

成功接收練習

成功跑 then

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

consle 結果 :

失敗接收練習

失敗跑 catch

axios.get('https://randomuser.me/api/err') // 錯誤的 API
  .then(res => {
    console.log(res.data.results);
  })
  .catch(err => {
    console.log(err.response); // err.response 才能顯示失敗內容
  })