Callback到Promise再到Async进化初探

legendmohe 发布于2019-08-20 18:58 / 2945人阅读

摘要：题外今天尝试了一下从文件经过再到文件的整个过程，这也是这种静态博客生成过程中的一环。这过程中，用到的中的系统，写的过程中恰好也经历了从到再到的转变。可以看到上面的函数已经非常顺序化了，当有个异步函数回调时，只需要顺序写就可以啦。

题外：今天尝试了一下从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之后去看终端了。当然，在实际开发中可能应用性不是特别强，尤其是对于上下文强依赖型、后端请求依赖型的场景。

idc机房托管专线服务再到 callback objecttype_callback 初探webrtc

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84971.html

JavaScript 异步进化史

摘要：签订协议的两方分别是异步接口和。在异步函数中，使用异常捕获的方案，代替了的异常捕获的方案。需要注意的是，在异步函数中使异步函数用时要使用，不然异步函会被同步执行。同步与异步通常，代码是由上往下依次执行的。如果有多个任务，就必需排队，前一个任务完成，后一个任务才会执行。这种执行模式称之为：同步（synchronous）。新手容易把计算机用语中的同步，和日常用语中的同步弄混淆。如，...

luzhuqun 2019-08-22 10:34 评论0 收藏0
原创 | JS异步工具之--Promise

摘要：作者珂珂沪江前端开发工程师本文为原创文章，有不当之处欢迎指出。只对未来发生的事情做出两种基本情况的应对成功和失败。在异步转同步这条道路上，只是一个出彩的点，他还尚有一些缺陷和不足，并不是我们最终的解决方案。作者：珂珂（沪江前端开发工程师）本文为原创文章，有不当之处欢迎指出。转载请标明出处。一个新事物的产生必然是有其历史原因的。为了更好的以同步的方式写异步的代码，人们在JS上操碎了...

alanoddsoff 2019-08-20 19:05 评论0 收藏0
Mocha测试初探

摘要：是测试用例，表示一个单独的测试，是测试的最小单位。第一个参数是测试用例的名称加应该等于，第二个参数是一个实际执行的函数。这里对异步代码进行测试时需要注意一点，默认一个单元测试最多执行超时会报错。 Mocha简介：一个具有丰富特性的javascript 测试框架，支持多种断言库，异步代码测试等，不仅可运行在node.js 环境中还可以运行在浏览器中。一、安装 // 全局安装 npm ...

Binguner 2019-08-21 17:35 评论0 收藏0
JavaScript：体验异步的优雅解决方案

摘要：但是的的出现碉堡的新朋友，我们可以轻松写出同步风格的代码同时又拥有异步机制，可以说是目前最简单，最优雅，最佳的解决方案了。不敢说这一定是终极的解决方案，但确实是目前最优雅的解决方案一、异步解决方案的进化史 JavaScript的异步操作一直是个麻烦事，所以不断有人提出它的各种解决方案。可以追溯到最早的回调函数(ajax老朋友)，到Promise(不算新的朋友)，再到ES6的Gener...

happyfish 2019-08-21 18:42 评论0 收藏0
ES8初探

ES8 在es8中主要有6个特性：主要的有： Shared memory and atomics （共享内存和原子） Async Functions（异步函数）其他的特性： Object.values/Object.entries （配合Object.keys使用） String padding （字符串填充） Object.getOwnPropertyDescriptors() Trai...

Shisui 2019-08-21 12:03 评论0 收藏0