非同步

1.同步的執行效率會比較低,耗費時間,但有利於我們對流程進行控制,避免很多不可掌控
   的意外情況。
2.非同步的執行效率高,節省時間,但是會佔用更多的資源,也不利於我們對程序進行控
   制。

使用callback function亦可解決非同步行為

// 缺點
1.可讀性低:如果程式碼出錯,要回頭慢慢找錯誤的地方。
2.可維護性低:如果要修改其中一組函式,牽一髮而動全身

promise主要用來處理非同步行為

callback以外另一種處理非同步的方法,可讀性及維護性都較佳

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/e6df423a-5def-486d-90e8-cf8c234ae7f9/promise.png

promise是透過new物件創建的關鍵建構子(constructor),這個物件帶有 resolve和 reject兩個參數的函示

new promise(function(resolve ,reject) {
	// 代辦
})

resolve 和 reject

resolve: 非同步作業成功時,將結果作為參數帶入執行。

reject: 非同步作業失敗時,將錯誤訊息作為參數帶如執行。

const runPromise = (name ,success) => {
    return new Promise ( (res, rej) => {
        if (success) { 
            res(`${name}回傳成功`)
        } else {
            rej('reject回傳失敗')
        }
    })
}

then 和 catch

promise回傳的結果,需要使用then及catch獲得結果。

runPromise('Ian', true).then(res => 
	console.log(res)  // Ian回傳成功
).catch(rej => 
	console.log(rej)
)

async/await

async/await是基於promise的語法糖

// Promise寫法
function getToken() {
  return new Promise(function (res, rej) {
    const randomNum = Math.random() > 0.5 ? true : false;
    setTimeout(() => {
      if (randomNum) {
        res(`條件符合${randomNum}`);
      } else {
        rej(`條件不符合${randomNum}`);
      }
    }, 3000);
  });
}

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

使用async/await寫法取代原先promise需要then()和catch()接受resolve,reject值,改為用try,catch及async和await