初探 async 與 await

前言

  async 是 JavaScript 的新標準，抽個空做個學習，在此做個紀錄。

內容

  async 是異步的意思，可以宣告異步 function 來完成異步執行，並且必須回傳 Promise 物件，而 await 是專門搭配 async function 使用的語法，範例如下

function resolveByTime(x, waitTime) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(x);
    }, waitTime);
  });
}


async function add1(x) {
  const a = await resolveByTime(20, 2000);
  const b = await resolveByTime(30, 2000);
  return a + b;
}

add1(20).then(v => {
  console.log(v);  // prints 70 after 4 seconds.
});
//
async function add2(x) {
  const a =  resolveByTime(20, 2000);
  const b =  resolveByTime(30, 7000);
  return x + await a + await b;
}
console.log('start');

add2(20).then(v => {
  console.log(v);  // prints 70 after 7 seconds.
});

resolveByTime() 是一個可以用輸入引數來決定 Promise() 的執行時間的 function ，並且回傳第一個引數作為結果，接著可以看到 add1() ，在開頭可以看到 async 的語法，宣告後就可已在該 fumction 裡使用 await 語法，await 使用在 function 之前，且該 function 必須回傳 Promise ， resolveByTime()  雖然回傳的結果是 Promise ，但搭配 await 使用時，回傳的結果會是 resolve() 的引數，以 resolveByTime() 來說，就是回傳第一個引數，所以第一個使用 await 可以解釋成等待 2 秒後回傳 20 ，接著又做了一次 await ，不過這次回傳的結果是 30 ，接著執行 add1() ，要注意執行時請當它是一個 Promise 來執行，所以可以直接喚起 then() ，接著又宣告了 add2() ，一樣是 async function ，這次的用法不太一樣，可以看到  resolveByTime() 前不加 await 了，而是在使用結果的變數前加 await ，有什麼差別呢? add1() 的用法第一個  resolveByTime() 在執行完前，第二個 resolveByTime() 不會被執行，所以 add1() 的執行時間是 4 秒 ，在 add2() 的 resolveByTime()  會被同時啟動，所以執行時間是 7 秒 ，最後在注意的是執行 add1() 與 add2() 的總共時間並不是 11 秒 ，而是 7 秒! add1() 執行後程式並不會停下來等待結果，而是馬上執行 add2()。

參考資料

[ developer.mozilla.org ] async function