簡(jiǎn)單理解Generator自執(zhí)行及async、await語(yǔ)法原理

stackfing 發(fā)布于2019-08-20 14:05 / 911人閱讀

摘要：為了更加方便的處理異步操作問(wèn)題，現(xiàn)在最新的前端框架生態(tài)都開(kāi)始用上了和，有的甚至已經(jīng)開(kāi)始使用最新的語(yǔ)法了，這兩樣都是基于自動(dòng)執(zhí)行的原理。這里就簡(jiǎn)單理解下自執(zhí)行及語(yǔ)法原理一函數(shù)函數(shù)指的是能將執(zhí)行結(jié)果傳入回調(diào)函數(shù)，并將該回調(diào)函數(shù)返回的函數(shù)。

為了更加方便的處理異步操作問(wèn)題，
現(xiàn)在最新的前端框架生態(tài)都開(kāi)始用上了Generator和yield，
有的甚至已經(jīng)開(kāi)始使用最新的async、await語(yǔ)法了，
這兩樣都是基于Generator自動(dòng)執(zhí)行的原理。

這里就簡(jiǎn)單理解下Generator自執(zhí)行及async、await語(yǔ)法原理：

一、thunk函數(shù)

thunk函數(shù)指的是能將執(zhí)行結(jié)果傳入回調(diào)函數(shù)，并將該回調(diào)函數(shù)返回的函數(shù)。
是不是有點(diǎn)抽象，舉個(gè)例子:

var readFile = function (fileName) {
    return function (callback) {
        return fs.readFile(fileName, callback)
    }
}

下面我們來(lái)看下thunk函數(shù)怎樣執(zhí)行

readFile("./package.json")((err, str) => {
    console.log(str.toString())
})

問(wèn): thunk的執(zhí)行比普通函數(shù)要麻煩不少，那么它有什么優(yōu)勢(shì)呢？

thunk函數(shù)的優(yōu)勢(shì)在于它能將異步操作返回結(jié)果的獲取權(quán)交給thunk函數(shù)的返回值，
而不是將異步操作結(jié)果傳入thunk函數(shù)本身的作用域內(nèi)，這點(diǎn)很重要，
因?yàn)樗芙Y(jié)合Generator語(yǔ)法讓Generator函數(shù)自動(dòng)執(zhí)行

二、Generator

es6的Generator函數(shù)，具體語(yǔ)法這里就不介紹了，

我們來(lái)編寫(xiě)一個(gè)基于thunk函數(shù)的Generator：

let gen = function* () {
    let r1 = yield readFile("./package.json")
    console.log(r1.toString())
    let r2 = yield readFile("./index.js")
    console.log(r2.toString())
}

我們來(lái)手動(dòng)執(zhí)行一下這個(gè)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)
    })
})

可以注意到，在我們手動(dòng)執(zhí)行基于thunk函數(shù)的Generator時(shí)，
有很多代碼是可以復(fù)用的，
沒(méi)錯(cuò)，所謂的Generator自動(dòng)執(zhí)行就是把這些可復(fù)用的部分封裝成函數(shù)，
然后讓它們遞歸執(zhí)行，直到執(zhí)行完所有的yield。

三、Generator自動(dòng)執(zhí)行器

下面就是Generator自動(dòng)執(zhí)行的核心代碼

function run(fn) {
    let gen = fn()
    function next(err, data) {
        let result = gen.next(data)
        if (result.done) {
            return
        }
        result.value(next)
    }
    next()
}

可以看到無(wú)非就是把可復(fù)用的部分封裝成next函數(shù)，然后讓其遞歸執(zhí)行，
直到執(zhí)行完所有的yield

其調(diào)用代碼為:

run(gen)

這樣就將原本繁雜的異步操作封裝的十分簡(jiǎn)單了

基于Promise的Generator的自動(dòng)執(zhí)行

上面的例子是基于thunk函數(shù)的，而即將出現(xiàn)的es7的async、await語(yǔ)法是基于Promise的

這里再上一個(gè)基于Promise的Generator的自動(dòng)執(zhí)行

//包裝返回Promise對(duì)象的函數(shù)
function readFile(fileName) {
    return new Promise((resolve, reject) => {
        fs.readFile(fileName, (error, data) => {
            if (error) {
                reject(error)
            } else {
                resolve(data)
            }
        })
    })
}

// 編寫(xiě)Generator
let gen = function* () {
    let r1 = yield readFile("./package.json")
    console.log(r1.toString())
    let r2 = yield readFile("./index.js")
    console.log(r2.toString())
}

// 編寫(xiě)Generator執(zhí)行器
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執(zhí)行器自動(dòng)執(zhí)行
run(gen)

這個(gè)和基于thunk函數(shù)的大同小異，只是把函數(shù)返回值的獲取權(quán)以Promise的方式交出

希望這篇文章能幫助你簡(jiǎn)單的理解Generator自執(zhí)行及async、await語(yǔ)法原理 ^.^