Generator在ES6中的自動執行詳解-js教程-PHP中文網

首頁

web前端

js教程

Generator在ES6中的自動執行詳解

不言

Oct 19, 2018 pm 03:10 PM

es6 javascript 前端

這篇文章帶給大家的內容是關於ES6中Generator的自動執行詳解，有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

單一非同步任務

var fetch = require('node-fetch');

function* gen(){
    var url = 'https://api.github.com/users/github';
    var result = yield fetch(url);
    console.log(result.bio);
}

登入後複製

為了獲得最終的執行結果，你需要這樣做：

var g = gen();
var result = g.next();

result.value.then(function(data){
    return data.json();
}).then(function(data){
    g.next(data);
});

登入後複製

首先執行Generator 函數，取得遍歷器對象。

接著使用 next 方法，執行非同步任務的第一階段，即 fetch(url)。

注意，由於fetch(url) 會傳回一個Promise 對象，所以result 的值為：

{ value: Promise { <pending> }, done: false }

登入後複製

最後我們為這個Promise 物件新增一個then 方法，先將其傳回的資料格式化(data.json())，再呼叫g.next，將所得的資料傳進去，由此可以執行非同步任務的第二階段，程式碼執行完畢。

多個非同步任務

上節我們只呼叫了一個接口，那如果我們呼叫了多個接口，使用了多個yield，我們豈不是要在then 函數中不斷的嵌套下去…

所以我們來看看執行多個非同步任務的情況：

var fetch = require('node-fetch');

function* gen() {
    var r1 = yield fetch('https://api.github.com/users/github');
    var r2 = yield fetch('https://api.github.com/users/github/followers');
    var r3 = yield fetch('https://api.github.com/users/github/repos');

    console.log([r1.bio, r2[0].login, r3[0].full_name].join('\n'));
}

登入後複製

為了獲得最終的執行結果，你可能要寫成：

var g = gen();
var result1 = g.next();

result1.value.then(function(data){
    return data.json();
})
.then(function(data){
    return g.next(data).value;
})
.then(function(data){
    return data.json();
})
.then(function(data){
    return g.next(data).value
})
.then(function(data){
    return data.json();
})
.then(function(data){
    g.next(data)
});

登入後複製

但我知道你肯定不想寫成這樣…

其實，利用遞歸，我們可以這樣寫：

function run(gen) {
    var g = gen();

    function next(data) {
        var result = g.next(data);

        if (result.done) return;

        result.value.then(function(data) {
            return data.json();
        }).then(function(data) {
            next(data);
        });

    }

    next();
}

run(gen);

登入後複製

其中的關鍵就是yield 的時候返回一個Promise 對象，給這個Promise 物件加入then 方法，當非同步操作成功時執行 then 中的 onFullfilled 函數，onFullfilled 函數中再去執行 g.next，從而讓 Generator 繼續執行，然後再回傳一個Promise，再在成功時執行g.next，然後再返回…

#啟動器函數

##在run 這個啟動器函數中，我們在then 函數中將資料格式化data.json()，但在更廣泛的情況下，例如yield 直接跟一個Promise，而非一個fetch 函數傳回的Promise，因為沒有json 方法，程式碼就會報錯。所以為了更具備通用性，連同這個例子和啟動器，我們修改為：

var fetch = require('node-fetch');

function* gen() {
    var r1 = yield fetch('https://api.github.com/users/github');
    var json1 = yield r1.json();
    var r2 = yield fetch('https://api.github.com/users/github/followers');
    var json2 = yield r2.json();
    var r3 = yield fetch('https://api.github.com/users/github/repos');
    var json3 = yield r3.json();

    console.log([json1.bio, json2[0].login, json3[0].full_name].join('\n'));
}

function run(gen) {
    var g = gen();

    function next(data) {
        var result = g.next(data);

        if (result.done) return;

        result.value.then(function(data) {
            next(data);
        });

    }

    next();
}

run(gen);

登入後複製

只要 yield 後跟著一個 Promise 對象，我們就可以利用這個 run 函數將 Generator 函數自動執行。

回呼函數

yield 後一定要跟著一個 Promise 物件才能保證 Generator 的自動執行嗎？如果只是一個回呼函數呢？讓我們來看個範例：

首先我們來模擬一個普通的非同步請求：

function fetchData(url, cb) {
    setTimeout(function(){
        cb({status: 200, data: url})
    }, 1000)
}

登入後複製

我們將這個函數改造成：

function fetchData(url) {
    return function(cb){
        setTimeout(function(){
            cb({status: 200, data: url})
        }, 1000)
    }
}

登入後複製

對於這樣的Generator 函數：

function* gen() {
    var r1 = yield fetchData('https://api.github.com/users/github');
    var r2 = yield fetchData('https://api.github.com/users/github/followers');

    console.log([r1.data, r2.data].join('\n'));
}

登入後複製

如果要得到最終的結果：

var g = gen();

var r1 = g.next();

r1.value(function(data) {
    var r2 = g.next(data);
    r2.value(function(data) {
        g.next(data);
    });
});

登入後複製

如果寫成這樣的話，我們會面臨跟第一節同樣的問題，那就是當使用多個yield 時，程式碼會循環嵌套起來…

同樣利用遞歸，所以我們可以將其改造為：

function run(gen) {
    var g = gen();

    function next(data) {
        var result = g.next(data);

        if (result.done) return;

        result.value(next);
    }

    next();
}

run(gen);

登入後複製

run

由此可以看到Generator 函數的自動執行需要一種機制，即當非同步操作有了結果，能夠自動交回執行權。

而兩種方法可以做到這一點。

（1）回呼函數。將非同步操作進行包裝，並暴露出回呼函數，在回呼函數裡面交回執行權。

（2）Promise 物件。將非同步操作包裝成 Promise 對象，用 then 方法交回執行權。

在兩種方法中，我們各寫了一個 run 啟動器函數，那我們能不能將這兩種方式結合在一些，寫一個通用的 run 函數呢？讓我們試試看：

// 第一版
function run(gen) {
    var gen = gen();

    function next(data) {
        var result = gen.next(data);
        if (result.done) return;

        if (isPromise(result.value)) {
            result.value.then(function(data) {
                next(data);
            });
        } else {
            result.value(next)
        }
    }

    next()
}

function isPromise(obj) {
    return 'function' == typeof obj.then;
}

module.exports = run;

登入後複製

其實實作的很簡單，判斷 result.value 是否是 Promise，是就加入 then 函數，不是就直接執行。

return Promise

我們已經寫了一個不錯的啟動器函數，支援 yield 後面跟著回呼函數或 Promise 物件。

現在有一個問題需要思考，就是我們要如何獲得 Generator 函數的回傳值呢？又如果 Generator 函數中出現了錯誤，就例如 fetch 了一個不存在的接口，這個錯誤該如何捕獲呢？

這很容易讓人想到 Promise，如果這個啟動器函數回傳一個 Promise，我們就可以為這個 Promise 物件加上 then 函數，當所有的非同步操作執行成功後，我們執行 onFullfilled 函數，如果有任何失敗，就執行 onRejected 函數。

我們寫一版：

// 第二版
function run(gen) {
    var gen = gen();

    return new Promise(function(resolve, reject) {

        function next(data) {
            try {
                var result = gen.next(data);
            } catch (e) {
                return reject(e);
            }

            if (result.done) {
                return resolve(result.value)
            };

            var value = toPromise(result.value);

            value.then(function(data) {
                next(data);
            }, function(e) {
                reject(e)
            });
        }

        next()
    })

}

function isPromise(obj) {
    return 'function' == typeof obj.then;
}

function toPromise(obj) {
    if (isPromise(obj)) return obj;
    if ('function' == typeof obj) return thunkToPromise(obj);
    return obj;
}

function thunkToPromise(fn) {
    return new Promise(function(resolve, reject) {
        fn(function(err, res) {
            if (err) return reject(err);
            resolve(res);
        });
    });
}

module.exports = run;

登入後複製

與第一版有很大的不同：

首先，我們回傳了一個Promise，當result.done 為true 的時候，我們將該值resolve(result.value)，如果執行的過程中出現錯誤，被catch 住，我們會將原因reject(e)。

其次，我們會使用 thunkToPromise 將回呼函數包裝成一個 Promise，然後統一的新增 then 函數。這裡值得注意的是，在thunkToPromise 函數中，我們遵循了error first 的原則，這意味著當我們處理回呼函數的情況時：

// 模拟数据请求
function fetchData(url) {
    return function(cb) {
        setTimeout(function() {
            cb(null, { status: 200, data: url })
        }, 1000)
    }
}

登入後複製

在成功時，第一個參數應該會傳回null ，表示沒有錯誤原因。

優化

我們在第二版的基礎上將程式碼寫的更簡潔優雅一點，最終的程式碼如下：

// 第三版
function run(gen) {

    return new Promise(function(resolve, reject) {
        if (typeof gen == 'function') gen = gen();

        // 如果 gen 不是一个迭代器
        if (!gen || typeof gen.next !== 'function') return resolve(gen)

        onFulfilled();

        function onFulfilled(res) {
            var ret;
            try {
                ret = gen.next(res);
            } catch (e) {
                return reject(e);
            }
            next(ret);
        }

        function onRejected(err) {
            var ret;
            try {
                ret = gen.throw(err);
            } catch (e) {
                return reject(e);
            }
            next(ret);
        }

        function next(ret) {
            if (ret.done) return resolve(ret.value);
            var value = toPromise(ret.value);
            if (value && isPromise(value)) return value.then(onFulfilled, onRejected);
            return onRejected(new TypeError('You may only yield a function, promise ' +
                'but the following object was passed: "' + String(ret.value) + '"'));
        }
    })
}

function isPromise(obj) {
    return 'function' == typeof obj.then;
}

function toPromise(obj) {
    if (isPromise(obj)) return obj;
    if ('function' == typeof obj) return thunkToPromise(obj);
    return obj;
}

function thunkToPromise(fn) {
    return new Promise(function(resolve, reject) {
        fn(function(err, res) {
            if (err) return reject(err);
            resolve(res);
        });
    });
}

module.exports = run;

登入後複製

如果我们再将这个启动器函数写的完善一些，我们就相当于写了一个 co，实际上，上面的代码确实是来自于 co……

而 co 是什么？ co 是大神 TJ Holowaychuk 于 2013 年 6 月发布的一个小模块，用于 Generator 函数的自动执行。

如果直接使用 co 模块，这两种不同的例子可以简写为：

// yield 后是一个 Promise
var fetch = require('node-fetch');
var co = require('co');

function* gen() {
    var r1 = yield fetch('https://api.github.com/users/github');
    var json1 = yield r1.json();
    var r2 = yield fetch('https://api.github.com/users/github/followers');
    var json2 = yield r2.json();
    var r3 = yield fetch('https://api.github.com/users/github/repos');
    var json3 = yield r3.json();

    console.log([json1.bio, json2[0].login, json3[0].full_name].join('\n'));
}

co(gen);

登入後複製

// yield 后是一个回调函数
var co = require('co');

function fetchData(url) {
    return function(cb) {
        setTimeout(function() {
            cb(null, { status: 200, data: url })
        }, 1000)
    }
}

function* gen() {
    var r1 = yield fetchData('https://api.github.com/users/github');
    var r2 = yield fetchData('https://api.github.com/users/github/followers');

    console.log([r1.data, r2.data].join('\n'));
}

co(gen);

登入後複製

是不是特别的好用？

以上是Generator在ES6中的自動執行詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

gmail信箱登陸入口在哪裡

7798

Java教學

1644

CakePHP 教程

1402

Laravel 教程

1299

PHP教程

1234

Related knowledge

WebSocket與JavaScript：實現即時監控系統的關鍵技術 Dec 17, 2023 pm 05:30 PM

WebSocket與JavaScript：實現即時監控系統的關鍵技術引言：隨著互聯網技術的快速發展，即時監控系統在各個領域中得到了廣泛的應用。而實現即時監控的關鍵技術之一就是WebSocket與JavaScript的結合使用。本文將介紹WebSocket與JavaScript在即時監控系統中的應用，並給出程式碼範例，詳細解釋其實作原理。一、WebSocket技

PHP與Vue：完美搭檔的前端開發利器 Mar 16, 2024 pm 12:09 PM

PHP與Vue：完美搭檔的前端開發利器在當今網路快速發展的時代，前端開發變得愈發重要。隨著使用者對網站和應用的體驗要求越來越高，前端開發人員需要使用更有效率和靈活的工具來創建響應式和互動式的介面。 PHP和Vue.js作為前端開發領域的兩個重要技術，搭配起來可以稱得上是完美的利器。本文將探討PHP和Vue的結合，以及詳細的程式碼範例，幫助讀者更好地理解和應用這兩

JavaScript與WebSocket：打造高效率的即時天氣預報系統 Dec 17, 2023 pm 05:13 PM

JavaScript和WebSocket：打造高效的即時天氣預報系統引言：如今，天氣預報的準確性對於日常生活以及決策制定具有重要意義。隨著技術的發展，我們可以透過即時獲取天氣數據來提供更準確可靠的天氣預報。在本文中，我們將學習如何使用JavaScript和WebSocket技術，來建立一個高效的即時天氣預報系統。本文將透過具體的程式碼範例來展示實現的過程。 We

簡易JavaScript教學：取得HTTP狀態碼的方法 Jan 05, 2024 pm 06:08 PM

JavaScript教學：如何取得HTTP狀態碼，需要具體程式碼範例前言：在Web開發中，經常會涉及到與伺服器進行資料互動的場景。在與伺服器進行通訊時，我們經常需要取得傳回的HTTP狀態碼來判斷操作是否成功，並根據不同的狀態碼來進行對應的處理。本篇文章將教你如何使用JavaScript來取得HTTP狀態碼，並提供一些實用的程式碼範例。使用XMLHttpRequest

Django是前端還是後端？一探究竟！ Jan 19, 2024 am 08:37 AM

Django是一個由Python編寫的web應用框架，它強調快速開發和乾淨方法。儘管Django是web框架，但要回答Django是前端還是後端這個問題，需要深入理解前後端的概念。前端是指使用者直接和互動的介面，後端是指伺服器端的程序，他們透過HTTP協定進行資料的互動。在前端和後端分離的情況下，前後端程式可以獨立開發，分別實現業務邏輯和互動效果，資料的交

前端面試官常問的問題 Mar 19, 2024 pm 02:24 PM

在前端開發面試中，常見問題涵蓋廣泛，包括HTML/CSS基礎、JavaScript基礎、框架和函式庫、專案經驗、演算法和資料結構、效能最佳化、跨域請求、前端工程化、設計模式以及新技術和趨勢。面試官的問題旨在評估候選人的技術技能、專案經驗以及對行業趨勢的理解。因此，應試者應充分準備這些方面，以展現自己的能力和專業知識。

Go語言前端技術探秘：前端開發新視野 Mar 28, 2024 pm 01:06 PM

Go語言作為一種快速、高效的程式語言，在後端開發領域廣受歡迎。然而，很少有人將Go語言與前端開發聯繫起來。事實上，使用Go語言進行前端開發不僅可以提高效率，還能為開發者帶來全新的視野。本文將探討使用Go語言進行前端開發的可能性，並提供具體的程式碼範例，幫助讀者更了解這一領域。在傳統的前端開發中，通常會使用JavaScript、HTML和CSS來建立使用者介面

Django：前端和後端開發都能搞定的神奇框架！ Jan 19, 2024 am 08:52 AM

Django：前端和後端開發都能搞定的神奇框架！ Django是一個高效、可擴展的網路應用程式框架。它能夠支援多種Web開發模式，包括MVC和MTV，可以輕鬆地開發出高品質的Web應用程式。 Django不僅支援後端開發，還能夠快速建構出前端的介面，透過模板語言，實現靈活的視圖展示。 Django把前端開發和後端開發融合成了一種無縫的整合，讓開發人員不必專門學習

See all articles

Generator在ES6中的自動執行詳解

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題