Thunk 函数

要想让Generator和异步操作产生联系,就必须过thunk函数这一关。这一关过了之后,立即就可以着手异步操作的事情,因此大家再坚持坚持。至于thunk函数是什么,下文会详细演示。

本节演示的代码可参考这里

本节内容概述

  • 一个普通的异步函数
  • 封装成一个thunk函数
  • thunk函数的特点
  • 使用thunkify
  • 接下来...

一个普通的异步函数

就用 nodejs 中读取文件的函数为例,通常都这么写

fs.readFile('data1.json', 'utf-8', (err, data) => {
    // 获取文件内容
})

Js中文网周刊 - 领略前端技术前沿 一个收集JavaScript 新闻和精选文章的周刊

其实这个写法就是将三个参数都传递给fs.readFile这个方法,其中最后一个参数是一个callback函数。这种函数叫做 多参数函数,我们接下来做一个改造

封装成一个thunk函数

改造的代码如下所示。不过是不是感觉越改造越复杂了?不过请相信:你看到的复杂仅仅是表面的,这一点东西变的复杂,是为了让以后更加复杂的东西变得简单。对于个体而言,随性比较简单,遵守规则比较复杂;但是对于整体(包含很多个体)而言,大家都随性就不好控制了,而大家都遵守规则就很容易管理 ———— 就是这个道理!

const thunk = function (fileName, codeType) {
    // 返回一个只接受 callback 参数的函数
    return function (callback) {
        fs.readFile(fileName, codeType, callback)
    }
}
const readFileThunk = thunk('data1.json', 'utf-8')
readFileThunk((err, data) => {
    // 获取文件内容
})

先自己看一看以上代码,应该是能看懂的,但是你可能就是看懂了却不知道这么做的意义在哪里。意义先不管,先把它看懂,意义下一节就会看到。

  • 执行const readFileThunk = thunk('data1.json', 'utf-8')返回的其实是一个函数
  • readFileThunk这个函数,只接受一个参数,而且这个参数是一个callback函数

thunk函数的特点

就上上面的代码,我们经过对传统的异步操作函数进行封装,得到一个只有一个参数的函数,而且这个参数是一个callback函数,那这就是一个thunk函数。就像上面代码中readFileThunk一样。

使用thunkify

上面代码的封装,是我们手动来做的,但是没遇到一个情况就需要手动做吗?在这个开源的时代当让不会这样,直接使用第三方的thunkify就好了。

首先要安装npm i thunkify --save,然后在代码的最上方引用const thunkify = require('thunkify')。最后,上面我们手动写的代码,完全可以简化成这几行,非常简单!

const thunk = thunkify(fs.readFile)
const readFileThunk = thunk('data1.json', 'utf-8')
readFileThunk((err, data) => {
    // 获取文件内容
})

接下来...

了解了thunk函数,我们立刻就将Generator和异步操作进行结合

看完两件小事

如果你觉得这篇文章对你挺有启发,我想请你帮我两个小忙:

  1. 关注我们的 GitHub 博客,让我们成为长期关系
  2. 把这篇文章分享给你的朋友 / 交流群,让更多的人看到,一起进步,一起成长!
  3. 关注公众号 「IT平头哥联盟」,公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程

JS中文网是中国领先的新一代开发者社区和专业的技术媒体,一个帮助开发者成长的社区,目前已经覆盖和服务了超过 300 万开发者,你每天都可以在这里找到技术世界的头条内容。欢迎热爱技术的你一起加入交流与学习,JS中文网的使命是帮助开发者用代码改变世界

results matching ""

    No results matching ""