简单理解Generator自执行及async、await语法原理

为了更加方便的处理异步操作问题，
现在最新的前端框架生态都开始用上了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语法原理 ^.^