Callback到Promise再到Async进化初探

题外：今天尝试了一下从Markdown文件经过ejs再到html文件的整个过程，这也是Hexo这种静态博客生成过程中的一环。这过程中，用到的Node中的fs系统，写的过程中恰好也经历了从Callback到Promise再到Async的转变。文末有福利哦！

在Node开发过程中，经常会遇到异步的情况，异步简单的说就是一个函数在返回时，调用者不能得到最终结果，而是需要等待一段时间才能得到，那么这个函数可以算作异步函数。那在Node开发中具体可以体现为资源的请求，例如访问数据库、读写文件等等。下面举个小例子来代码演示一下。

Callback

先上代码：

const fs = require('fs'),
  ejs = require('ejs'),
  matter = require('gray-matter'),
  showdown = require('showdown'),
  converter = new showdown.Converter()

fs.readFile('./source/hello.md', 'utf8', (error, data) => {
  if (error) {
    console.log(error)
    return
  } else {
    const mdData = matter(data)
    const html = converter.makeHtml(mdData.content)
    fs.readFile('./views/index.ejs', 'utf8', (error, data) => {
      if (error) {
        console.log(error)
        return
      } else {
        // ejs to html
        const template = ejs.compile(data)
        const htmlStr = template({content: html})
        fs.writeFile('./public/index.html', htmlStr, (error) => {
          if (error) {
            console.log(error)
            return
          } else {
            console.log('success')
          }
        })
      }
    })
  }
})

可以看到，这只是写了三个读写文件，嵌套就显得非常臃肿，可以预见到当有更多的callback将是怎样一个情景，代码做了什么东西就不解释了，主要看一下callback的场景，在读或写文件之后可以跟一个回调函数，当前一个读文件操作完成之后，才能在回调中利用结果来执行下一个读文件和写文件，通过回调来保证函数的执行顺序。具体fs的使用，可见Node-fs文档

Promise

来看看引入Promise之后的写法：

const readFileAsync = function (path) {
  return new Promise((resolve, reject) => {
    fs.readFile(path, 'utf8', (error, data) => {
      if (error) {
        reject(error)
      } else {
        resolve(data)
      }
    })
  })
}
const writeFileAsync = function (path, data) {
  return new Promise((resolve, reject) => {
    fs.writeFile(path, data, (error, data) => {
      if (error) {
        reject(error)
      } else {
        resolve(data)
      }
    })
  })
}

let html = ''
readFileAsync('./source/hello.md')
  .then((data1) => {
    const mdData = matter(data1)
    html = converter.makeHtml(mdData.content)
    return readFileAsync('./views/index.ejs')
  })
  .then((data2) => {
    const template = ejs.compile(data2)
    const htmlStr = template({content: html})
    return writeFileAsync('./public/index2.html', htmlStr)
  })
  .then(() => console.log('success'))
  .catch(error => console.log(error))

这里只是简单的用Promise封装了一下fs的两个函数，拿其中一个函数来说，readFileAsync返回了一个Promise对象，这样就可以通过这个对象来使用then进行结果回调，虽然在封装的时候需要写一些代码，但是当有多处使用的时候，代码可以明显的简洁许多，不同再一层一层地向右缩进。另外有一些工具库如bluebird提供了API，可以很方便地处理异步。

在下面的代码中使用bluebird

Async await

还是先上代码：

const fs = require('fs'),
  ejs = require('ejs'),
  matter = require('gray-matter'),
  showdown = require('showdown'),
  converter = new showdown.Converter(),
  Promise = require('bluebird')

Promise.promisifyAll(fs)

async function renderHtml() {
  const data1 = await fs.readFileAsync('./source/hello.md', 'utf8')
  const mdData = matter(data1)
  const html = converter.makeHtml(mdData.content)
  const data2 = await fs.readFileAsync('./views/index.ejs', 'utf8')
  const template = ejs.compile(data2)
  const htmlStr = template({content: html})
  fs.writeFile('./public/index4.html', htmlStr)
  console.log('success')
}

renderHtml()

在Node7.6以上就已经支持async function了，定义时只需要在function之前添加async关键字，而await也只能在async function中使用，一般会跟一个Promise对象，表示等待Promise返回结果后，再继续执行。

可以看到上面的函数已经非常顺序化了，当有n个异步函数回调时，只需要顺序写就可以啦。可以看出，其实async await也离不开Promise，只不过写法上消除了then中带有callback的那一丝丝影子，让代码更加优雅~，因为没有了then,可以用try catch进行错误处理

VSCode插件推荐

小彩蛋来啦，正好结合这个例子，为方便实时看到每一步的执行结果，推荐一个VSCode
插件：Quokka.ja

可以实时地进行代码的执行结果，再也不用console.log之后去看终端了。当然，在实际开发中可能应用性不是特别强，尤其是对于上下文强依赖型、后端请求依赖型的场景。