JavaScript Day26 - Async、Await

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