微聊 Promise 试做一回

昨天说到 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, '微波完成，拿给客人');
  });
});

是不是感觉很简单呢？其实我刚开始真的完全没办法理解这个用法，还好有高手相助，终於学起来了。
好啦！今天就先聊到这罗！明天见！掰哺。