为了更加方便的处理异步操作问题,
现在最新的前端框架生态都开始用上了Generator和yield,
有的甚至已经开始使用最新的async、await语法了,
这两样都是基于Generator自动执行的原理。
这里就简单理解下Generator自执行及async、await语法原理:
一、thunk函数
thunk函数指的是能将执行结果传入回调函数,并将该回调函数返回的函数。
是不是有点抽象,举个例子:
var readFile = function (fileName) {
return function (callback) {
return fs.readFile(fileName, callback)
}
}
下面我们来看下thunk函数怎样执行
readFile('./package.json')((err, str) => {
console.log(str.toString())
})
问: thunk的执行比普通函数要麻烦不少,那么它有什么优势呢?
thunk函数的优势在于它能将异步操作返回结果的获取权交给thunk函数的返回值,
而不是将异步操作结果传入thunk函数本身的作用域内,这点很重要,
因为它能结合Generator语法让Generator函数自动执行
二、Generator
es6的Generator函数,具体语法这里就不介绍了,
我们来编写一个基于thunk函数的Generator:
let gen = function* () {
let r1 = yield readFile('./package.json')
console.log(r1.toString())
let r2 = yield readFile('./index.js')
console.log(r2.toString())
}
我们来手动执行一下这个Generator:
let g = gen()
let r1 = g.next()
r1.value(function (err, data) {
if (err) {
throw err
}
let r2 = g.next(data)
r2.value(function (err, data) {
if (err) {
throw err
}
g.next(data)
})
})
可以注意到,在我们手动执行基于thunk函数的Generator时,
有很多代码是可以复用的,
没错,所谓的Generator自动执行就是把这些可复用的部分封装成函数,
然后让它们递归执行,直到执行完所有的yield。
三、Generator自动执行器
下面就是Generator自动执行的核心代码
function run(fn) {
let gen = fn()
function next(err, data) {
let result = gen.next(data)
if (result.done) {
return
}
result.value(next)
}
next()
}
可以看到无非就是把可复用的部分封装成next函数,然后让其递归执行,
直到执行完所有的yield
其调用代码为:
run(gen)
这样就将原本繁杂的异步操作封装的十分简单了
基于Promise的Generator的自动执行
上面的例子是基于thunk函数的,而即将出现的es7的async、await语法是基于Promise的
这里再上一个基于Promise的Generator的自动执行
//包装返回Promise对象的函数
function readFile(fileName) {
return new Promise((resolve, reject) => {
fs.readFile(fileName, (error, data) => {
if (error) {
reject(error)
} else {
resolve(data)
}
})
})
}
// 编写Generator
let gen = function* () {
let r1 = yield readFile('./package.json')
console.log(r1.toString())
let r2 = yield readFile('./index.js')
console.log(r2.toString())
}
// 编写Generator执行器
function run(gen) {
let g = gen()
function next(data) {
let result = g.next(data)
if (result.done) {
return result.value
}
result.value.then((data) => next(data))
}
next()
}
//用Generator执行器自动执行
run(gen)
这个和基于thunk函数的大同小异,只是把函数返回值的获取权以Promise的方式交出
希望这篇文章能帮助你简单的理解Generator自执行及async、await语法原理 ^.^
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。