ES7：Async、Await

• async：async 寫在函式前面，表示函式是非同步的，回傳值是 Promise，所以可以接續使用 then 進行後續處理
• await：await 要寫在 async 內部，await 後面接的是一個 Promise，等待 Promise 的狀態被 resolved，之後才會繼續執行下一段程式，類似 then
• 想要接 Promise 的 catch 可以使用 try catch

參考 MDN 的例子比較

// 使用 promise 寫法
function getProcessedData(url) {
  return downloadData(url) // returns a promise
    .catch(e => {
      return downloadFallbackData(url); // returns a promise
    })
    .then(v => {
      return processDataInWorker(v); // returns a promise
    });
}

// 使用 async await
async function getProcessedData(url) {
  let v;
  try {
    v = await downloadData(url); // 對應 return
  } catch(e) {
    v = await downloadFallbackData(url); // 對應 .catch
  }
  return processDataInWorker(v); // 對應 .then
}

等待處理的例子

function resolveAfterXSeconds(x) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(x);
      console.log(`${x} Seconds`);
    }, x*1000);
  });
}


async function add(x) {
  const a = await resolveAfterXSeconds(3); // a 先執行
  const b = await resolveAfterXSeconds(2); // 等 a 執行完
  return x + a + b;
}

add(10).then(v => {
  console.log(v);  // prints 15 
});
// 3 Seconds 等 a 執行完
// 2 Seconds 等 b 執行完
// 15 (5秒後 10 + 3 + 2 = 15)

參考資料

MDN async function
鐵人賽：JavaScript Await 與 Async
JavaScript基本功修練：Day26 - Promise的語法糖：async/await
簡單理解 JavaScript Async 和 Await
JS 原力覺醒 Day16 - Async / Await：Promise 語法糖
【Day 11】穿越 ES6 邁向 ES7 的 async/await

次回

來說說 IIFE