【ES8系列】Async\Await

Async

ES6的 Promise 通過在函數內部實例化（new Promise()）一個Promise 對象返回一個 Promise 實例達到異步操作的目的，函數返回值是一個 Promise 對象。也就是說，用這種方法外部函數是一個普通函數，內部函數返回一個Promise 實例。

 那麼ES8的 Async 的作用則是不再需要手動返回一個 Promise，只需要在 聲明function 前加 async，會在返回時自動檢查返回值是否爲 Promise 實例，如果不是則轉換爲一個Promise 實例。這樣一來，在進行異步代碼編程時不需要手動添加 new Promise() 實例，只需要正確返回值就可以，其它的交給引擎處理。

異步函數和普通函數對比，以及異步函數取值操作實例：

// 普通函數
function firstAsync() {
  return 27
}
console.log(firstAsync()) // 27


// 聲明一個異步函數
async function firstAsync() {
  return 27
}
// 返回一個promise 對象
console.log(firstAsync()) // Promise {<resolved>: 27}

// 異步函數取值方法
// 聲明一個異步函數
async function firstAsync() {
  return 27
}
firstAsync().then(val => {
  console.log(val);// 27
}) 

那麼，Async 異步函數是如何取到返回值的？

異步函數會把返回值自動轉換爲一個 Promise 對象，轉換後把數據傳遞給 Promise 的 靜態方法 Promise.resolve() ，以上異步函數取值代碼可以這麼理解：

// 異步函數取值方法
// 聲明一個異步函數
async function firstAsync() {
  return Promise.resolve(28) // 把返回值不是promise實例的值通過Promise.resolve()這個靜態方法轉換成一個Promise 實例
}
firstAsync().then(val => {
  console.log(val);// 28
})

// 判斷 firstAsync的返回值是否是一個 Promise 實例
console.log(firstAsync() instanceof Promise) // true 

Async\Await

await 後必須是一個Promise對象，如果不是會自動轉換成一個Promise對象，另外await 必須配合 Async 來用，不能在沒有 Async 標註的函數體內使用 await。

// 異步函數
async function firstAsync() {
  // 異步函數內的異步操作：一秒後執行
  let promise = new Promise((resolve, reject) => {
    setTimeout(function () {
      resolve('now it is done')
    }, 1000)
  })
  // let result = await promise
  // console.log(result)
  // await promise 是一個表達式，最終有一個結果，這個表達式的值就是promise返回的值
  // await 後必須是一個Promise對象，如果不是會自動轉換成一個Promise對象
  // await 必須配合 Async 來用，不能在沒有 Async 標註的函數體內使用 await
  console.log(await promise)
  console.log(await 30)
  console.log(await Promise.resolve(40))
  console.log(2)
  return 3
}
firstAsync().then(val => {
  console.log(val)
})

// now it is done
// 30
// 40
// 2
// 3

 Async\Await 本質上來講是Promise的語法糖，只是比Promise使用方式更簡潔、優雅。