ES8 Async 和 Await

Async 和 Awaiit 是 Promise 的擴展，我們知道 JavaScript 是單線程的，使用 Promise 之後可以使非同步操作的書寫更簡潔，而 Async 使 Promise 像同步操作

一、Async

Async 自動將常規函數轉換成 Promise，返回值一個 Promise 對象，使用 async 的效果：

async function f() {
  return 123
}

console.log(f()) // Promise 對象

async function f() {
  return 123
}

f().then(console.log) // 123

可以看出，f() 的返回值有 then 方法（在 JavaScript 中只有原生 Promise 對象擁有 then 方法）

console.log(f() instanceof Promise) // true

通過驗證，我們知道想獲得一個 Promise 對象，可以不用再使用 new Promise 了，可以用 async 來實現

另外，async 函數顯示返回的結果如果不是 Promise，會自動包裝成 Promise 對象，也就是說上面的代碼等同於：

async function f() {
  return Promise.resolve(123)
}

二、Await

Await 放置在 Promise 調用之前，強制後面的代碼等待，直到 Promise 對象 resolve，得到 resolve 的值作為 await 表達式的運算結果

未使用 await 的效果：

async function f() {
  let promise = new Promise((resolve) => {
    setTimeout(() => resolve(123), 1000)
  })
  console.log(promise.then(val => console.log(val)))
  console.log(456)
}

f()

輸出：

使用 await 的效果：

async function f() {
  let promise = new Promise((resolve) => {
    setTimeout(() => resolve(123), 1000)
  })
  console.log(await promise)
  console.log(456)
}

f()

輸出：

await 的字面意思為“等待”，它等什麼呢？等的是 Promise 的返回結果，上面這段代碼由 async 開啟一個 Promise 對象，函數內部嵌套了一個 Promise 操作，這個操作需要等待 1 秒才返回“123”的結果，也就是說 await 在拿到這個結果之前不會執行後面的代碼，會一直等到拿到這個結果才往後繼續執行

註意：

• await 後面如果不是 Promise 對象會自動包裝成 Promise 對象
• await 只能在 async 函數內部使用，否則會報錯