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

stackfing 发布于2019-08-20 14:05 / 795人阅读

摘要：为了更加方便的处理异步操作问题，现在最新的前端框架生态都开始用上了和，有的甚至已经开始使用最新的语法了，这两样都是基于自动执行的原理。这里就简单理解下自执行及语法原理一函数函数指的是能将执行结果传入回调函数，并将该回调函数返回的函数。

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

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

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

【面试篇】寒冬求职季之你必须要懂的原生JS(中)

摘要：如果你还没读过上篇上篇和中篇并无依赖关系，您可以读过本文之后再阅读上篇，可戳面试篇寒冬求职季之你必须要懂的原生上小姐姐花了近百个小时才完成这篇文章，篇幅较长，希望大家阅读时多花点耐心，力求真正的掌握相关知识点。互联网寒冬之际，各大公司都缩减了HC，甚至是采取了裁员措施，在这样的大环境之下，想要获得一份更好的工作，必然需要付出更多的努力。一年前，也许你搞清楚闭包，this，原型链，就能获得...

andycall 2019-05-23 16:26 评论0 收藏0
【面试篇】寒冬求职季之你必须要懂的原生JS(中)

摘要：如果你还没读过上篇上篇和中篇并无依赖关系，您可以读过本文之后再阅读上篇，可戳面试篇寒冬求职季之你必须要懂的原生上小姐姐花了近百个小时才完成这篇文章，篇幅较长，希望大家阅读时多花点耐心，力求真正的掌握相关知识点。互联网寒冬之际，各大公司都缩减了HC，甚至是采取了裁员措施，在这样的大环境之下，想要获得一份更好的工作，必然需要付出更多的努力。一年前，也许你搞清楚闭包，this，原型链，就...

Mike617 2019-08-23 17:04 评论0 收藏0
ES6-7

摘要：的翻译文档由的维护很多人说，阮老师已经有一本关于的书了入门，觉得看看这本书就足够了。前端的异步解决方案之和异步编程模式在前端开发过程中，显得越来越重要。为了让编程更美好，我们就需要引入来降低异步编程的复杂性。 JavaScript Promise 迷你书（中文版）超详细介绍promise的gitbook，看完再不会promise...... 本书的目的是以目前还在制定中的ECMASc...

mudiyouyou 2019-08-21 18:40 评论0 收藏0
深入koa源码（二）：核心库原理

摘要：最近读了的源码，理清楚了架构设计与用到的第三方库。本系列将分为篇，分别介绍的架构设计和个核心库，最终会手动实现一个简易的。本文来自心谭博客深入源码核心库原理所有系列文章都放在了。这一段逻辑封装在了核心库里面。最近读了 koa2 的源码，理清楚了架构设计与用到的第三方库。本系列将分为 3 篇，分别介绍 koa 的架构设计和 3 个核心库，最终会手动实现一个简易的 koa。这是系列第 2...

tyheist 2019-08-23 18:17 评论0 收藏0
Async：简洁优雅的异步之道

摘要：前言在异步处理方案中，目前最为简洁优雅的便是函数以下简称函数。声明式表达式作为对象属性作为对象属性的简写式箭头函数返回值执行函数，会固定的返回一个对象。如果该对象最终成功，则会返回成功的返回值，相当将替换成返回值。前言在异步处理方案中，目前最为简洁优雅的便是async函数（以下简称A函数）。经过必要的分块包装后，A函数能使多个相关的异步操作如同同步操作一样聚合起来，使其相互间的关系...

leiyi 2019-08-23 11:36 评论0 收藏0