async函式解析

凱斯發表於2018-01-31
函式

轉載請註明出處：

async函式解析-掘金

async函式解析-部落格園

async函式解析-知乎

async函式是基於Generator函式實現的,也就是說是Generator函式的語法糖。在之前的文章有介紹過Generator函式語法和非同步應用，如果對其不瞭解的，可以先看看關於Generator函式的文章，這樣學習async函式的難度就不會太大。

傳送門: Generator語法解析 Generator函式非同步應用

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

文章目錄

  1. 含義
  2. 基本語法
  3. 錯誤處理
  4. 非同步應用

含義

我們知道，呼叫Generator函式不會立即執行，而是返回遍歷器物件。疲於手動執行遍歷器物件，因此就有了thunk(thunkify)函式結合run函式來實現自動流程管理。或者，使用co模組來實現自動流程管理，使Generator函式的使用更加方便。

而async函式ES2017標準引入的語法，是Generator函式的語法糖，因此其相對於Generator函式，具有以下基本特點。

內建執行器： 使用async函式可以像使用普通函式一樣，直接呼叫即可執行。不用像Generator函式一樣使用co模組來實現流程控制。

語義化更強： async關鍵字表示是一個非同步的函式，await表示需要等待執行。相對於yield表示式，語義化更強。

返回值是Promise： async函式返回值是Promise物件，這比Generator函式的返回值是Iterator物件方便多了，可以使用then方法來指定下一步的操作。

基本語法

使用async關鍵字表明函式是一個async函式，內部使用await關鍵字表明需要等待非同步任務結束後才繼續往下執行。

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函式的相關差不多就這樣了，稍微總結一下。

  1. async函式是基於Generator函式實現的，是Generator函式的語法糖。其內建執行器，呼叫後返回Promise物件，因此可以像普通韓式一樣使用。
  2. async函式內部丟擲錯誤或者await關鍵字後面的表示式丟擲錯誤，會使async函式返回的Promise物件從pending狀態變為reject狀態，從而可以被catch方法捕獲錯誤。而且，Promise物件的狀態一旦改變就不會再變，之後的非同步任務就不會執行了。
  3. await關鍵字後面的表示式可以是Promise物件，也可以是其他資料型別。如果是其他資料型別，則會通過Promise.resolve將其轉換為Promise物件
  4. async函式內部如果有多個await關鍵字，其後的非同步任務會繼發執行。如果每一個非同步任務不相互依賴，則可以使用Promise.all讓其併發執行，這樣可以在同樣的時間裡完成多個非同步任務，提高函式執行效率。
  5. 對於async內部丟擲的錯誤，可以使用try...catch來捕獲異常。雖然try...catch只能用於捕獲同步任務，但是await關鍵字可以使得非同步任務同步化,因此可以結合try...catch和await關鍵字捕獲非同步任務。

參考資料：

  1. async 函式
  2. async 函式的含義和用法

相關文章