js異步從入門到放棄（四）- Generator 封裝異步任務(wù)

jimhs 發(fā)布于2019-08-26 13:56 / 2491人閱讀

摘要：總結(jié)本文簡(jiǎn)要介紹了函數(shù)的一些特性，重點(diǎn)在于說明如何使用函數(shù)對(duì)異步任務(wù)進(jìn)行封裝，從而能夠讓異步代碼編寫的更加清晰。

在之前的文章介紹了傳統(tǒng)異步的實(shí)現(xiàn)方案，本文將介紹ES6中的一種全新的異步方案--Generator函數(shù)。

generator簡(jiǎn)介

簡(jiǎn)單介紹一下generator的原理和語法，(更詳細(xì)內(nèi)容請(qǐng)看ECMAScript 6 入門，本文只介紹和異步相關(guān)的核心內(nèi)容)

基本語法

通過一個(gè)簡(jiǎn)單的例子來了解generator函數(shù)

function* MyGenerator() {
    yield "yield的含義是:執(zhí)行此處時(shí)，暫停執(zhí)行當(dāng)前函數(shù)"
    yield "暫停之后的函數(shù)可以用next方法繼續(xù)執(zhí)行"
    return "遇到return之后會(huì)真正結(jié)束，done會(huì)變成true"
}

const gen = MyGenerator() //執(zhí)行后返回的是一個(gè)指針，可以利用該指針執(zhí)行next方法
console.log(gen.next()) // {value: "yield的含義是:執(zhí)行此處時(shí)，暫停執(zhí)行當(dāng)前函數(shù)“, done: false}
console.log(gen.next())// {value: "暫停之后的函數(shù)可以用next方法繼續(xù)執(zhí)行", done: false}
console.log(gen.next())// {value: "遇到return之后會(huì)真正結(jié)束，done會(huì)變成true", done: true}

數(shù)據(jù)交互

數(shù)據(jù)交互指的是可以通過yield把當(dāng)前執(zhí)行的結(jié)果傳出，也可以使用next把外部參數(shù)傳入

    function* MyGenerator(){
        const result = yield "傳出的數(shù)據(jù)"
        return result
    }
    const gen = MyGenerator()
    console.log(gen.next())// generatorAndAsync2.html:19 {value: "傳出的數(shù)據(jù)", done: false}
    console.log(gen.next("傳入的數(shù)據(jù)"))// {value: "傳入的數(shù)據(jù)", done: true}

交互的參數(shù)類型當(dāng)然也可以是函數(shù)：

    function sayHi(){
        console.log("hi");
    }
    
    function* MyGenerator(){
        const result = yield sayHi()
        return 
    }
    
    const gen = MyGenerator()
    const result = gen.next()// {value: sayHi, done: false}
    result.value() // 正常輸出"hi"

具備以上最核心的兩個(gè)特性之后,generator就可以進(jìn)行異步操作封裝。

異步任務(wù)封裝

首先，結(jié)合異步任務(wù)的特點(diǎn)以及前文提到的genrator函數(shù)的特性，提煉出使用generator封裝異步操作的核心思路：

在異步任務(wù)執(zhí)行時(shí)，使用yield交出執(zhí)行權(quán)

在異步任務(wù)結(jié)束后，使用next交還執(zhí)行權(quán)

起步

從一個(gè)最簡(jiǎn)單的例子開始：

// 1. 首先寫一個(gè)異步任務(wù),在一秒后返回特定字符串
function asyncTask(callback){
    setTimeout(()=>{
        callback("Hello Leo")
    }, 1000)
}

// 2. 接下來寫出期望執(zhí)行的順序
function* runTask() {
    let text = yield asyncTask
    console.log(text) // 我們期望這里正常輸出Hello Leo
}
// 3. 按照期望值執(zhí)行函數(shù)
const gen = runTask()// 此時(shí)執(zhí)行權(quán)已經(jīng)交出
gen.next().value(function (text) {// 執(zhí)行asyncTask并傳入callback ，關(guān)鍵點(diǎn)在于在callback里調(diào)用next交還執(zhí)行權(quán)
    gen.next(text)
})

首先，這段代碼雖然很粗糙，但是已經(jīng)反映了使用generator封裝異步任務(wù)的核心思想。最直觀的受益就是：runTask的內(nèi)容看起來很像同步代碼，條理清晰，很適合閱讀。

但是上面第3部分關(guān)于執(zhí)行的代碼很不靈活，我們不能每次都這么寫一段，因此接下來的目標(biāo)就是實(shí)現(xiàn)一個(gè)任務(wù)執(zhí)行器。

自動(dòng)任務(wù)執(zhí)行器

同樣的，先思考核心的思路：要想讓某個(gè)generator函數(shù)自動(dòng)執(zhí)行，無非就是一個(gè)while循環(huán):

1. 如果當(dāng)前yield返回值的done屬性為true,說明任務(wù)已經(jīng)執(zhí)行完成；
2. 如果當(dāng)前yield返回值的done屬性為false,說明任務(wù)還未執(zhí)行完成，則繼續(xù)執(zhí)行next，同時(shí)要注意參數(shù)傳遞

根據(jù)分析實(shí)現(xiàn)以下的執(zhí)行器：

function autoExecute(task) {
    const gen = task()
    let result = gen.next()
    while(true){
        if(result.done){
            break // 執(zhí)行結(jié)束
            return 
        }
        console.log(result.value)//為了便于觀察 我們加上console.log
        result = gen.next(result.value) // 每次都應(yīng)該重寫result 獲取最新結(jié)果
    }
}

function* simpleTask(){
    yield 1
    yield 2
    yield 3
    return 
}

autoExecute(simpleTask)// 測(cè)試我們寫的自動(dòng)執(zhí)行器 能夠正確輸出123

上面的執(zhí)行器已經(jīng)有了雛形，但是對(duì)于前面例子中，result.value為函數(shù)的情況還沒有處理，因此還需要稍微補(bǔ)充：

function isFunction(source){
     return Object.prototype.toString.call(source) === "[object Function]"
}

function autoExecute(task) {
    const gen = task()
    let result = gen.next()
    let isRuningAsync = false // 由于加入了異步處理，所以要增加一個(gè)標(biāo)志位避免重復(fù)進(jìn)入循環(huán)體
    while (!isRuningAsync) {
        if (result.done) {
            return
        }
        console.log(result.value)

        /* start 補(bǔ)充的處理函數(shù) */
        if (isFunction(result.value)) {
            isRuningAsync = true
            const callback = (arg) => {
                result = gen.next(arg) // 核心代碼
                isRuningAsync = false
            }
            result.value(callback)
            /* end 補(bǔ)充的處理函數(shù) */
        } else {
            result = gen.next(result.value)
        }
    }
}
autoExecute(runTask) // 試著用這個(gè)自動(dòng)執(zhí)行器執(zhí)行之前的異步任務(wù)

上面這個(gè)自動(dòng)執(zhí)行器，就完成了generator對(duì)異步任務(wù)的封裝。

總結(jié)

本文簡(jiǎn)要介紹了generator函數(shù)的一些特性，重點(diǎn)在于說明如何使用generator函數(shù)對(duì)異步任務(wù)進(jìn)行封裝，從而能夠讓異步代碼編寫的更加清晰。

再次強(qiáng)調(diào)：用generator函數(shù)對(duì)異步任務(wù)封裝的思想是很明確的--控制 Generator 函數(shù)的流程，在適當(dāng)?shù)臅r(shí)機(jī)接收和交還程序的執(zhí)行權(quán)，但是具體的實(shí)現(xiàn)方式并不唯一，例如本文用的是最簡(jiǎn)單直接的回調(diào)函數(shù)方式，在阮一峰老師的《es6入門》教程里，也有使用thunk思路來講解的部分，可以自行查閱。

GPU云服務(wù)器云服務(wù)器封裝異步函數(shù) 異步任務(wù)隊(duì)列 asynctask異步任務(wù) 文件異步上傳文件到云服務(wù)器

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/109850.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

jimhs

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

深度學(xué)習(xí)框架tensorflow

閱讀 773·2023-04-25 19:53
主機(jī)的域名是什么-主機(jī)域名中哪個(gè)表示主機(jī)名？

閱讀 4413·2021-09-22 15:13
HTML contenteditable屬性

閱讀 2635·2019-08-30 10:56
如何在Vue里建立長(zhǎng)按指令

閱讀 1383·2019-08-29 16:27
HTML簡(jiǎn)單的提示框

閱讀 3020·2019-08-29 14:00
js異步從入門到放棄（四）- Generator 封裝異步任務(wù)

閱讀 2492·2019-08-26 13:56
深入理解 Undefined

閱讀 621·2019-08-26 13:29
||和&&返回什么?

閱讀 1684·2019-08-26 11:31

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購！

js異步從入門到放棄（四）- Generator 封裝異步任務(wù)

相關(guān)文章

js異步從入門到放棄(實(shí)踐篇) — 常見寫法&面試題解析

JavaScript異步編程的終極演變

談?wù)凟S6前后的異步編程

我了解到的JavaScript異步編程

**ES6(一) —— 異步編程解決辦法[從回調(diào)函數(shù)到promise,generator,async]**

發(fā)表評(píng)論

0條評(píng)論

jimhs

男|高級(jí)講師

TA的文章

深度學(xué)習(xí)框架tensorflow

主機(jī)的域名是什么-主機(jī)域名中哪個(gè)表示主機(jī)名？

HTML contenteditable屬性

如何在Vue里建立長(zhǎng)按指令

HTML簡(jiǎn)單的提示框