async和await

一個函數若是加上 async ，那麼該函數就會返回一個 Promise

async function test() {
  return "1";
}
console.log(test()); // -> Promise {<resolved>: "1"}
能夠把 async 當作將函數返回值使用 Promise.resolve() 包裹了下。

await 只能在 async 函數中使用

function sleep() {
  return new Promise(resolve => {
    setTimeout(() => {
      console.log('finish')
      resolve("sleep");
    }, 2000);
  });
}
async function test() {
  let value = await sleep();
  console.log("object");
}
test()

上面代碼會先打印 finish 而後再打印 object 。由於 await 會等待 sleep 函數 resolve ，因此即便後面是同步代碼，也不會先去執行同步代碼再來執行異步代碼。

async 和 await 相比直接使用 Promise 來講，優點在於處理 then 的調用鏈，可以更清晰準確的寫出代碼。缺點在於濫用 await 可能會致使性能問題，由於 await 會阻塞代碼，也許以後的異步代碼並不依賴於前者，但仍然須要等待前者完成，致使代碼失去了併發性。

下面來看一個使用 await 的代碼。

var a = 0
var b = async () => {
  a = a + await 10
  console.log('2', a) // -> '2' 10
  a = (await 10) + a
  console.log('3', a) // -> '3' 20
}
b()
a++
console.log('1', a) // -> '1' 1

對於以上代碼你可能會有疑惑，這裏說明下原理

首先函數 b 先執行，在執行到 await 10 以前變量 a 仍是 0，由於在 await 內部實現了 generators ，generators 會保留堆棧中東西，因此這時候 a = 0 被保存了下來
由於 await 是異步操做，遇到await就會當即返回一個pending狀態的Promise對象，暫時返回執行代碼的控制權，使得函數外的代碼得以繼續執行，因此會先執行 console.log('1', a)
這時候同步代碼執行完畢，開始執行異步代碼，將保存下來的值拿出來使用，這時候 a = 10
而後後面就是常規執行代碼了