前置知識準備
- Generator 函數 執行會返回一個迭代器(Iterator), 在迭代器上可以調用 next() 方法, 執行下一個 yield 或 return
- 調用 next() 方法,會返回一個對象 {value: res, done: false} , value 的值 爲 yield 之後表達式的值,done 的值 表示迭代器,是否已經執行完畢(最後一個yield 或 return )
- next() 方法,可以傳入一個值,做爲前一個yield 表達式的返回值
有了這些知識,可以把Promise 對象 做一個的 yield 的值,配合一個執行器,來處理異步操作
方式一: Generator + Promise + 執行器
const fs = require('fs')
// Promise 版的readFile
const readFile = function (fileName) {
return new Promise(function(resolve, reject) {
fs.readFile(fileName, function(err, data){
if (err) return reject(error);
resolve(data);
})
})
}
const gen = function * () {
let f1 = yield readFile('a.txt');
let f2 = yield readFile('b.txt');
console.log('F1--->', f1.toString());
console.log('F2--->', f2.toString());
}
// 基於 Generator 和 Promise 的自動執行器
function run(gen) {
let g = gen();
function next(data) {
let result = g.next(data);
if (result.done) return result.value;
result.value.then(function(data) {
next(data);
});
}
next();
}
run(gen);
前端全棧學習交流圈:866109386,面向1-3經驗年前端開發人員,幫助突破技術瓶頸,提升思維能力 羣內有大量PDF可供自取,更有乾貨實戰項目視頻進羣免費領取。
執行器 中的 result.value 現在是一個Promise, 通過 then 方法拿到需要的結果,傳下一次 next 方法,這樣 let f1 = yield readFile('a.txt'); 就可以拿到值!
方式二:Generator + Thunk函數 + 執行器
const fs = require('fs')
// 把一個單一執行的函數 ,變成需要再次調用的函數,固定一部分參數
function thunkify(fn, obj = {}) {
return function () {
let args = Array.from(arguments);
return function (m) {
args.push(m)
return fn.apply(obj, args)
}
}
}
const readFile = thunkify(fs.readFile, fs);
const gen = function* () {
let f1 = yield readFile('a.txt');
let f2 = yield readFile('b.txt');
console.log('F1-->', f1.toString());
console.log('F2-->', f2.toString());
}
// 基於 Generator 和 Thunk函數的自動執行器
function run(fn) {
let gen = fn();
function next(err, data) {
let result = gen.next(data);
if (result.done) return 1;
result.value(next);
}
next();
}
run(gen);
這裏的 Thunk 轉換器,把原來的 fs.readFile 函數 轉換成需要兩次調用的函數 ,readFile 的執行結果,可以通過回調函數能參數傳遞出來,再傳給 next 方法
方式三:基於 async 函數 和 await 的異步處理方式
const fs = require('fs')
// Promise 版的readFile
const readFile = function (fileName) {
return new Promise(function(resolve, reject) {
fs.readFile(fileName, function(err, data){
if (err) return reject(err);
resolve(data);
})
})
}
const asyncReadFile = async function () {
const f1 = await readFile('a.txt');
const f2 = await readFile('b.txt');
console.log(f1.toString());
console.log(f2.toString());
};
asyncReadFile();
readFile 函數 對比方式一沒有大的變化 ,Generator 函數變成 了 async 函數,可見 這處方式 只是 方式一的一個語法糖,async 函數自帶了執行器!