摘要：異步編程是每個(gè)使用編程的人都會(huì)遇到的問(wèn)題，無(wú)論是前端的請(qǐng)求，或是的各種異步。本文就來(lái)總結(jié)一下常見(jiàn)的四種處理異步編程的方法。利用一種鏈?zhǔn)秸{(diào)用的方法來(lái)組織異步代碼，可以將原來(lái)以回調(diào)函數(shù)形式調(diào)用的代碼改為鏈?zhǔn)秸{(diào)用。

異步編程是每個(gè)使用 JavaScript 編程的人都會(huì)遇到的問(wèn)題，無(wú)論是前端的 ajax 請(qǐng)求，或是 node 的各種異步 API。本文就來(lái)總結(jié)一下常見(jiàn)的四種處理異步編程的方法。

使用回調(diào)函數(shù)是最常見(jiàn)的一種形式，下面來(lái)舉幾個(gè)例子：

// jQuery ajax
$.get("test.html", data => {
  $("#result").html(data)
})

// node 異步讀取文件
const fs = require("fs")

fs.readFile("/etc/passwd", (err, data) => {
  if (err) {
    throw err
  }
  console.log(data)
})

回調(diào)函數(shù)非常容易理解，就是定義函數(shù)的時(shí)候?qū)⒘硪粋€(gè)函數(shù)（回調(diào)函數(shù)）作為參數(shù)傳入定義的函數(shù)當(dāng)中，當(dāng)異步操作執(zhí)行完畢后在執(zhí)行該回調(diào)函數(shù)，從而可以確保接下來(lái)的操作在異步操作之后執(zhí)行。

回調(diào)函數(shù)的缺點(diǎn)在于當(dāng)需要執(zhí)行多個(gè)異步操作的時(shí)候會(huì)將多個(gè)回調(diào)函數(shù)嵌套在一起，組成代碼結(jié)構(gòu)上混亂，被稱為回調(diào)地獄（callback hell）。

func1(data0, data1 => {
  func2(data2, data3 => {
    func3(data3, data4 => data4)
  })
})

Promise 利用一種鏈?zhǔn)秸{(diào)用的方法來(lái)組織異步代碼，可以將原來(lái)以回調(diào)函數(shù)形式調(diào)用的代碼改為鏈?zhǔn)秸{(diào)用。

// jQuery ajax promise 方式
$.get("test.html")
  .then(data => $(data))
  .then($data => $data.find("#link").val("href"))
  .then(href => console.log(href))

自己定義一個(gè) Promise 形式的函數(shù)在 ES6 當(dāng)中也非常簡(jiǎn)單：

function ready() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("ready")
    }, 3000)
  })
}

ready().then(ready => console.log(`${ready} go!`))

在 node 8.0 以上的版本還可以利用 util.promisify 方法將回調(diào)形式的函數(shù)變?yōu)?Promise 形式。

const util = require("util")
const fs = require("fs")

const readPromise = util.promisify(fs.readFile)

readPromise("test.txt").then(data => console.log(data.toString()))

想詳細(xì)了解 Promise 可以閱讀拙作談?wù)?ES6 的 Promise 對(duì)象。

node 的著名開(kāi)發(fā)者 TJ 利用 ES6 新特性生成器（Generators）開(kāi)發(fā)了一個(gè)異步控制工具 co。

如果不了解 Generators 可以看看以下的文章：

深入淺出ES6（三）：生成器 Generators

深入淺出ES6（十一）：生成器 Generators，續(xù)篇

利用 co 可以將異步代碼的寫(xiě)法寫(xiě)成類(lèi)似同步代碼的形式：

const util = require("util")
const fs = require("fs")
const co = require("co")

const readFile = util.promisify(fs.readFile)

co(function* () {
  const txt = yield readFile("file1.txt", "utf8")
  console.log(txt)
  const txt2 = yield readFile("file2.txt", "utf8")
  console.log(txt2)
})

使用 Generators 的好似顯然易見(jiàn)，可以使異步代碼寫(xiě)得非常清晰，缺點(diǎn)就是要另外引入相關(guān)的庫(kù)來(lái)利用該特性。

node7.6 以上的版本引入了一個(gè) ES7 的新特性 Async/Await 是專門(mén)用于控制異步代碼。先看一個(gè)例子：

const util = require("util")
const fs = require("fs")

const readFile = util.promisify(fs.readFile)

async function readFiles () {
  const txt = await readFile("file1.txt", "utf8")
  console.log(txt)
  const txt2 = await readFile("file2.txt", "utf8")
  console.log(txt2)
})

首先要使用 async 關(guān)鍵字定義一個(gè)包含異步代碼的函數(shù)，在 Promise 形式的異步函數(shù)前面使用 await 關(guān)鍵字就可以將異步寫(xiě)成同步操作的形式。

看上去與 Generators 控制方式相差不大，但是 Async/Await 是原生用于控制異步，所以是比較推薦使用的。

最后來(lái)探討下四種異步控制方法的錯(cuò)誤處理。

回調(diào)函數(shù)錯(cuò)誤處理非常簡(jiǎn)單，就是在回調(diào)函數(shù)中同時(shí)回傳錯(cuò)誤信息：

const fs = require("fs")

fs.readFile("file.txt", (err, data) => {
  if (err) {
    throw err
  }
  console.log(data)
})

Promise 在 then 方法之后使用一個(gè) catch 方案來(lái)捕捉錯(cuò)誤信息：

const fs = require("fs")
const readFile = util.promisify(fs.readFile)

readFile("file.txt")
  .then(data => console.log(data))
  .catch(err => console.log(err))

Generators 和 Async/Await 比較類(lèi)似，可以有兩種方式，第一種使用 Promise 的 catch 方法，第二種用 try catch 關(guān)鍵字。

Promise catch

const fs = require("fs")
const co = require("co")
const readFile = util.promisify(fs.readFile)

co(function* () {
  const data = yield readFile("file.txt").catch(err => console.log(err))
})

const fs = require("fs")
const co = require("co")
const readFile = util.promisify(fs.readFile)

async function testRead() {
  const data = await readFile("file.txt").catch(err => console.log(err))
}

try/catch

const fs = require("fs")
const co = require("co")
const readFile = util.promisify(fs.readFile)

co(function* () {
  try {
    const data = yield readFile("file.txt")
  } catch(err) {
    console.log(err)
  }
})

const fs = require("fs")
const readFile = util.promisify(fs.readFile)

async function testRead() {
  try {
    const data = await readFile("file.txt")
  } catch(err) {
    console.log(data)
  }
}

感謝您的閱讀，有不足之處請(qǐng)為我指出。

參考

談?wù)?ES6 的 Promise 對(duì)象

深入淺出ES6（三）：生成器 Generators

深入淺出ES6（十一）：生成器 Generators，續(xù)篇

本文同步于我的個(gè)人博客 http://blog.acwong.org/2017/06/24/javascript-async-programming/