async函數解析

時間 2019-12-11

標籤 async 函數解析简体版

原文原文鏈接

轉載請註明出處：async函數解析html

async函數是基於Generator函數實現的,也就是說是Generator函數的語法糖。在以前的文章有介紹過Generator函數語法和異步應用，若是對其不瞭解的，能夠先看看關於Generator函數的文章，這樣學習async函數的難度就不會太大。es6

傳送門: Generator語法解析 Generator函數異步應用併發

接下來會用一些篇幅說明一下async函數，文末會給出async函數的參考學習文章。異步

文章目錄

含義
基本語法
錯誤處理
異步應用

含義

咱們知道，調用Generator函數不會當即執行，而是返回遍歷器對象。疲於手動執行遍歷器對象，所以就有了thunk(thunkify)函數結合run函數來實現自動流程管理。或者，使用co模塊來實現自動流程管理，使Generator函數的使用更加方便。async

而async函數ES2017標準引入的語法，是Generator函數的語法糖，所以其相對於Generator函數，具備如下基本特色。函數

內置執行器：使用async函數能夠像使用普通函數同樣，直接調用便可執行。不用像Generator函數同樣使用co模塊來實現流程控制。學習

語義化更強：async關鍵字表示是一個異步的函數，await表示須要等待執行。相對於yield表達式，語義化更強。this

返回值是Promise：async函數返回值是Promise對象，這比Generator函數的返回值是Iterator對象方便多了，可使用then方法來指定下一步的操做。code

基本語法

使用async關鍵字代表函數是一個async函數，內部使用await關鍵字代表須要等待異步任務結束後才繼續往下執行。orm

async function as () {
  return 123
}
as().then(data => {
  console.log(data)
})

從上面代碼能夠看出，調用async函數會返回Promise對象，返回值能夠做爲then方法成功處理函數的參數值。

若是在async內部若是拋出錯誤或者出現異常，會被then方法的錯誤處理函數捕獲或者catch方法捕獲。

async function as () {
  throw new Error('出錯拉！')
}
as().then(data => {
  console.log(data)
}).catch(err => {
  console.log(err)
})  // Error: xixi, catch方法捕獲到錯誤

另外，async函數內部可使用await關鍵字，表示後面的表達式是異步任務。await關鍵字後邊的表達式能夠是一個Promise對象，或者簡單(複雜)數據類型(Number, String, RegExp, Boolean, Array, Objext)。若是是簡單(複雜)數據類型，async函數會隱式調用Promise.resolve方法將其轉換爲Pormise對象。

function foo () {
  return new Promise((resolve, reject) => {
    window.setTimeout(() => {
      resolve('async')
    }, 1000)
  })
}
async function as () {
  const data = await foo()  //foo函數使用setTimeout來模擬異步。
  console.log(data)
}
as()  // async

async function as () {
  return await 123   //若是是其餘數據類型，也是如此。
}
as().then(data => {
  console.log(data)
})  // 123

若是await關鍵字後面的表達式是非Promise、非thenable的普通的值，則會隱式調用Promise.resolve方法將其轉換爲Promise對象，await關鍵字會在內部調用then方法將resolve的值返回。

await內部實現大體以下
function await (data) {
  return new Promise((resolve, reject) => {
    resolve(data)
  }).then(data => {
    return data
  })
}

總之，await關鍵字是then方法的語法糖，會將resolve的值傳遞出來。

另外，若是在await關鍵字後的表達式拋出了錯誤，會使async函數返回的Promise對象從pending狀態轉變爲reject狀態，進而被catch方法捕獲到錯誤。

function foo () {
  throw new Error('err')
}
async function as () {
  await foo()
}
as().then(data => {})
    .catch(err => {
      console.log(err);
    })  // as函數返回的Promise對象從pending狀態變爲reject狀態。

若是某個await關鍵字後面的表達式拋出錯誤，async函數的狀態就會變爲reject，那麼函數就會暫停執行，後面的表達式就不會在繼續執行。由於Promise函數有一個特色是，一旦狀態改變，就不會再變，以後在調用也是保持同一個狀態。

function foo () {
  throw new Error('err')
}
async function as () {
  await foo()
  return Promise.resolve('succ') // 不會執行到這裏，由於Promise對象的狀態一旦改變就不會在變了，所以不執行。
}
as().then(data => {})
    .catch(err => {
      console.log(err);
    })

由於async函數默認狀況下返回的是Promise對象，所以能夠將async函數做爲await關鍵字後面的表達式。async函數調用另外一個async函數會更加方便，不會像Generator函數須要使用yield*表達式來調用。

async function foo () {
  return Promise.resolve('async')
}
async function as () {
  return await foo()   // 調用foo函數會返回Promise對象
}
as().then(data => {
  console.log(data)
})

另外，若是async函數內部沒有拋出錯誤，函數正常執行。那麼每個await關鍵字後面的異步任務會繼發執行。也就是說，一個異步任務結束以後纔會執行另一個異步任務，而不是併發執行。

async function foo () {
  return new Promise((resolve, reject) => {
    window.setTimeout(() => {
      resolve(10)
    }, 1000)
  })
}
async function bar () {
  return new Promise((resolve, reject) => {
    window.setTimeout(() => {
      resolve(20)
    }, 2000)
  })
}
async function as () {
  let t1 = Date.now()
  const a = await foo()
  const b = await bar()
  let t2 = Date.now()
  console.log(t2 - t1)  // 有偏差，大概3004ms
  return a + b
}
as().then(data => {
  console.log(data)   // 大概3s後輸入30
})

若是兩個異步任務互不依賴，若是按照上面的代碼，兩個異步任務繼發執行，這樣作的缺點是時間浪費了。原本200ms能夠完成的兩個異步任務，卻用了400ms。所以可讓兩個互不依賴的異步任務同時觸發。有兩種方法：

// 方法一：
async function as () {
  const t1 = Date.now()
  const [fo, ba] = [foo(), bar()]
  // 以上兩個函數同時執行，並將結果做爲await關鍵字的表達式
  const a = await fo
  const b = await ba
  const t2 = Date.now()
  console.log(t2 - t1)
  return a + b
}

// 寫法二：結合使用Promise.all等待全部異步任務完成後纔會返回
async function as () {
  const t1 = Date.now()
  const arr = await Promise.all([foo(), bar()])
  const t2 = Date.now()
  console.log(t2 - t1)
  return arr[0] + arr[1]
}
as().then(data => {
  console.log(data)  // 30
})

錯誤處理

因爲async函數內部的異步任務一旦出現錯誤，那麼就等同於async函數返回的Promise對象被reject。所以，爲了防止異步任務出現錯誤，可使用try...catch來捕獲錯誤，使async函數內部能夠正常執行。

async function as () {
  let a = 0
  let b = 0
  try {
    a = await foo()
    b = await bar()
  } catch (e) {}
  return a + b
}
as().then(data => {
  console.log(data) // 30
})

咱們知道，try...catch只能用於處理同步的操做，對於異步任務沒法捕獲到錯誤。而await關鍵字可以暫停函數處理，等待異步任務結束以後返回。所以在async函數中使用try...catch結合await關鍵字捕獲異步錯誤是一個不錯的方法。

異步應用

咱們來看看使用Promise、Generator、async來實現異步應用的差異。接下來會使用setTimeout來模擬異步。

先來看兩個基礎函數

function foo (obj) {
  return new Promise((resolve, reject) => {
    window.setTimeout(() => {
      let data = {
        height: 180
      }
      data = Object.assign({}, obj, data)
      resolve(data)
    }, 1000)
  })
}
function bar (obj) {
  return new Promise((resolve, reject) => {
    window.setTimeout(() => {
      let data = {
        talk () {
          console.log(this.name, this.height);
        }
      }
      data = Object.assign({}, obj, data)
      resolve(data)
    }, 1500)
  })
}

兩個函數內部都返回了Promise實例對象，經過Object.assign來合併傳遞過來的參數。

首先看看純Promise對象的實現。

function main () {
  return new Promise((resolve, reject) => {
    const data = {
      name: 'keith'
    }
    resolve(data)
  })
}
main().then(data => {
  foo(data).then(res => {
    bar(res).then(data => {
      return data.talk()   // keith 180
    })
  })
})

調用過程當中就是在不斷使用then方法，不夠直觀，操做自己的語義不太容易看出來。並且有可能出現回調地獄的風險。

接下來看看Generator函數的實現。因爲Generator函數的調用須要手動執行，所以寫了run函數來實現流程自動控制。

function *gen () {
  const data = {
    name: 'keith'
  }
  const fooData = yield foo(data)
  const barData = yield bar(fooData)
  return barData.talk()
}
function run (gen) {
  const g = gen()
  const next = data => {
    let result = g.next(data)
    if (result.done) return result.value
    result.value.then(data => {
      next(data)
    })
  }
  next()
}
run(gen)

使用run函數來實現自動流程控制，Generator函數的好處相對於Promise對象來講，使得異步的過程同步化，同時少了回調地獄的風險。可是缺點是須要使用像run函數或者co模塊來實現流程控制。

接下來使用async函數來實現看看。

async function main () {
  const data = {
    name: 'keith'
  }
  const fooData = await foo(data)
  const barData = await bar(fooData)
  return barData
}
main().then(data => {
  data.talk()
})

從上面代碼中，能夠看出，使用async函數的代碼量最少，並且使得異步過程同步化，更進一步，async函數內置執行器。調用的方法更加簡潔。

ok，差很少就這樣了，稍微總結一下。

async函數是基於Generator函數實現的，是Generator函數的語法糖。其內置執行器，調用後返回Promise對象，所以能夠像普通韓式同樣使用。
async函數內部拋出錯誤或者await關鍵字後面的表達式拋出錯誤，會使async函數返回的Promise對象從pending狀態變爲reject狀態，從而能夠被catch方法捕獲錯誤。並且，Promise對象的狀態一旦改變就不會再變，以後的異步任務就不會執行了。
await關鍵字後面的表達式能夠是Promise對象，也能夠是其餘數據類型。若是是其餘數據類型，則會經過Promise.resolve將其轉換爲Promise對象
async函數內部若是有多個await關鍵字，其後的異步任務會繼發執行。若是每個異步任務不相互依賴，則可使用Promise.all讓其併發執行，這樣能夠在一樣的時間裏完成多個異步任務，提升函數執行效率。
對於async內部拋出的錯誤，可使用try...catch來捕獲異常。雖然try...catch只能用於捕獲同步任務，可是await關鍵字可使得異步任務同步化,所以能夠結合try...catch和await關鍵字捕獲異步任務。

參考資料：

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。