ES6 系列之 Generator 的自動執(zhí)行的方法示例
單個異步任務(wù)
var fetch = require('node-fetch');
function* gen(){
var url = 'https://api.github.com/users/github';
var result = yield fetch(url);
console.log(result.bio);
}
為了獲得最終的執(zhí)行結(jié)果，你需要這樣做：
var g = gen();
var result = g.next();
result.value.then(function(data){
return data.json();
}).then(function(data){
g.next(data);
});
首先執(zhí)行 Generator 函數(shù)，獲取遍歷器對象。
然后使用 next 方法，執(zhí)行異步任務(wù)的第一階段，即 fetch(url)。
注意，由于 fetch(url) 會返回一個 Promise 對象，所以 result 的值為：
{ value: Promise { <pending> }, done: false }
最后我們?yōu)檫@個 Promise 對象添加一個 then 方法，先將其返回的數(shù)據(jù)格式化(data.json())，再調(diào)用 g.next，將獲得的數(shù)據(jù)傳進去，由此可以執(zhí)行異步任務(wù)的第二階段，代碼執(zhí)行完畢。
多個異步任務(wù)
上節(jié)我們只調(diào)用了一個接口，那如果我們調(diào)用了多個接口，使用了多個 yield，我們豈不是要在 then 函數(shù)中不斷的嵌套下去……
所以我們來看看執(zhí)行多個異步任務(wù)的情況：
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'));
}
為了獲得最終的執(zhí)行結(jié)果，你可能要寫成：
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);
其中的關(guān)鍵就是 yield 的時候返回一個 Promise 對象，給這個 Promise 對象添加 then 方法，當(dāng)異步操作成功時執(zhí)行 then 中的 onFullfilled 函數(shù)，onFullfilled 函數(shù)中又去執(zhí)行 g.next，從而讓 Generator 繼續(xù)執(zhí)行，然后再返回一個 Promise，再在成功時執(zhí)行 g.next，然后再返回……
啟動器函數(shù)
在 run 這個啟動器函數(shù)中，我們在 then 函數(shù)中將數(shù)據(jù)格式化 data.json()，但在更廣泛的情況下，比如 yield 直接跟一個 Promise，而非一個 fetch 函數(shù)返回的 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 函數(shù)將 Generator 函數(shù)自動執(zhí)行。
回調(diào)函數(shù)
yield 后一定要跟著一個 Promise 對象才能保證 Generator 的自動執(zhí)行嗎？如果只是一個回調(diào)函數(shù)呢？我們來看個例子：
首先我們來模擬一個普通的異步請求：
function fetchData(url, cb) {
setTimeout(function(){
cb({status: 200, data: url})
}, 1000)
}
我們將這種函數(shù)改造成：
function fetchData(url) {
return function(cb){
setTimeout(function(){
cb({status: 200, data: url})
}, 1000)
}
}
對于這樣的 Generator 函數(shù)：
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'));
}
如果要獲得最終的結(jié)果：
var g = gen();
var r1 = g.next();
r1.value(function(data) {
var r2 = g.next(data);
r2.value(function(data) {
g.next(data);
});
});
如果寫成這樣的話，我們會面臨跟第一節(jié)同樣的問題，那就是當(dāng)使用多個 yield 時，代碼會循環(huán)嵌套起來……
同樣利用遞歸，所以我們可以將其改造為：
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 函數(shù)的自動執(zhí)行需要一種機制，即當(dāng)異步操作有了結(jié)果，能夠自動交回執(zhí)行權(quán)。
而兩種方法可以做到這一點。
（1）回調(diào)函數(shù)。將異步操作進行包裝，暴露出回調(diào)函數(shù)，在回調(diào)函數(shù)里面交回執(zhí)行權(quán)。
（2）Promise 對象。將異步操作包裝成 Promise 對象，用 then 方法交回執(zhí)行權(quán)。
在兩種方法中，我們各寫了一個 run 啟動器函數(shù)，那我們能不能將這兩種方式結(jié)合在一些，寫一個通用的 run 函數(shù)呢？我們嘗試一下：
// 第一版
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;
其實實現(xiàn)的很簡單，判斷 result.value 是否是 Promise，是就添加 then 函數(shù)，不是就直接執(zhí)行。
return Promise
我們已經(jīng)寫了一個不錯的啟動器函數(shù)，支持 yield 后跟回調(diào)函數(shù)或者 Promise 對象。
現(xiàn)在有一個問題需要思考，就是我們?nèi)绾潍@得 Generator 函數(shù)的返回值呢？又如果 Generator 函數(shù)中出現(xiàn)了錯誤，就比如 fetch 了一個不存在的接口，這個錯誤該如何捕獲呢？
這很容易讓人想到 Promise，如果這個啟動器函數(shù)返回一個 Promise，我們就可以給這個 Promise 對象添加 then 函數(shù)，當(dāng)所有的異步操作執(zhí)行成功后，我們執(zhí)行 onFullfilled 函數(shù)，如果有任何失敗，就執(zhí)行 onRejected 函數(shù)。
我們寫一版：
// 第二版
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，當(dāng) result.done 為 true 的時候，我們將該值 resolve(result.value)，如果執(zhí)行的過程中出現(xiàn)錯誤，被 catch 住，我們會將原因 reject(e)。
其次，我們會使用 thunkToPromise 將回調(diào)函數(shù)包裝成一個 Promise，然后統(tǒng)一的添加 then 函數(shù)。在這里值得注意的是，在 thunkToPromise 函數(shù)中，我們遵循了 error first 的原則，這意味著當(dāng)我們處理回調(diào)函數(shù)的情況時：
// 模擬數(shù)據(jù)請求
function fetchData(url) {
return function(cb) {
setTimeout(function() {
cb(null, { status: 200, data: url })
}, 1000)
}
}
在成功時，第一個參數(shù)應(yīng)該返回 null，表示沒有錯誤原因。
優(yōu)化
我們在第二版的基礎(chǔ)上將代碼寫的更加簡潔優(yōu)雅一點，最終的代碼如下：
// 第三版
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
如果我們再將這個啟動器函數(shù)寫的完善一些，我們就相當(dāng)于寫了一個 co，實際上，上面的代碼確實是來自于 co……
而 co 是什么？ co 是大神 TJ Holowaychuk 于 2013 年 6 月發(fā)布的一個小模塊，用于 Generator 函數(shù)的自動執(zhí)行。
如果直接使用 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 后是一個回調(diào)函數(shù)
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);
是不是特別的好用？
ES6 系列
ES6 系列目錄地址：https://github.com/mqyqingfeng/Blog
ES6 系列預(yù)計寫二十篇左右，旨在加深 ES6 部分知識點的理解，重點講解塊級作用域、標(biāo)簽?zāi)０?、箭頭函數(shù)、Symbol、Set、Map 以及 Promise 的模擬實現(xiàn)、模塊加載方案、異步處理等內(nèi)容。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
innerHTML innerText textContent使用區(qū)別示例詳解
這篇文章主要為大家介紹了innerHTML innerText textContent使用區(qū)別示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11
這篇文章主要介紹了基于Bootstrap框架實現(xiàn)圖片切換的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-03-03
“增強js程序代碼的健壯性”之我見大量示例代碼...2007-05-05
閉包，指的是詞法表示包括不被計算的變量的函數(shù)，也就是說，函數(shù)可以使用函數(shù)之外定義的變量。2010-12-12
這篇文章主要為大家詳細介紹了javascript實現(xiàn)獲取中文漢字拼音首字母，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-05-05
這篇文章主要介紹了JS實現(xiàn)的郵箱提示補全效果,涉及javascript正則匹配、事件響應(yīng)及頁面元素動態(tài)操作相關(guān)技巧,需要的朋友可以參考下2018-01-01
這篇文章主要為大家詳細介紹了使用js實現(xiàn)瀑布流效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
BootStrap 智能表單實戰(zhàn)系列(二)BootStrap支持的類型簡介
這篇文章主要介紹了BootStrap 智能表單實戰(zhàn)系列(二)BootStrap支持的類型簡介 的相關(guān)資料，非常不錯具有參考借鑒價值，感興趣的朋友一起學(xué)習(xí)吧2016-06-06
這篇文章主要為大家詳細介紹了小程序?qū)崿F(xiàn)上下切換位置，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11
使用JS判斷是否數(shù)字和小數(shù)點組合的數(shù)字的兩中方法比較(isNaN和逐判斷)
使用js判斷數(shù)字和小數(shù)點的方法非常之多。但是就目前而言，我見過最好用的判斷方法應(yīng)該來說是isNaN，它比較方便，而逐個比較的方法有一定的弊端。2009-09-09