昨天說到 Promise 的好處多多，今天來說一下 Promise 是該怎麼用呢？其實使用 Promise 不困難，微人來簡單的試做一個。一個 Promise 是一個根據附加給他的 Callback 回傳的物件，以取代傳遞 Callback 到這個函數。
Promise 可以透過建構子建立。所以用建構子包裹舊的 API就可以唷。正常情況下，所有非同步函數都會回傳 Promise，然而許多 API 仍然用舊的方式來傳遞成功、失敗 Callback，setTimeout()就是一個個典型的例子：

const timeoutPromise = ms => new Promise((resolve, _reject) => {
  setTimeout(() => {
    resolve();
  }, ms);
})

說明一下，Promise 建構子需要一個運作函數來正規地處理或拒絕。但由於在 setTimeout()這個情況下不會有失敗的狀況，所以這裡不需要 reject。
在 ECMAScript 2017 中在有 async/await 的語法可以搭配使用，讓同步程式可以更進一步。例如：

const startTask = async (orderDiv, name, ms) => {
  const stepP = document.createElement('p');
  stepP.textContent = name;
  orderDiv.appendChild(stepP);
  if (ms) {
    await timeoutPromise(ms);
  }
}

document.addEventListener('DOMContentLoaded', () => {
  const ordersDiv = document.querySelector('.orders');

  // 點熱狗
  document.getElementById('order-hot-dog').addEventListener('click', async () => {
    const orderDiv = document.createElement('div');
    orderDiv.className = 'p-4 border-dashed border-4 border-gray-600';

    ordersDiv.appendChild(orderDiv);

    await startTask(orderDiv, '接到熱狗訂單', 300);
    await startTask(orderDiv, '把熱狗放入微波爐，開始微波', 2000);
    await startTask(orderDiv, '微波完成，拿給客人');
  });
});

是不是感覺很簡單呢？其實我剛開始真的完全沒辦法理解這個用法，還好有高手相助，終於學起來了。
好啦！今天就先聊到這囉！明天見！掰哺。