簡單理解Generator自執行及async、await語法原理

stackfing 發布于2019-08-20 14:05 / 912人閱讀

摘要：為了更加方便的處理異步操作問題，現在最新的前端框架生態都開始用上了和，有的甚至已經開始使用最新的語法了，這兩樣都是基于自動執行的原理。這里就簡單理解下自執行及語法原理一函數函數指的是能將執行結果傳入回調函數，并將該回調函數返回的函數。

為了更加方便的處理異步操作問題，
現在最新的前端框架生態都開始用上了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語法原理 ^.^

GPU云服務器云服務器 async await await-async async-await 簡單理解超融合架構

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/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