前置知識準備
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();//歡迎加入全棧開發交流圈一起學習交流：864305860
} //面向1-3年前端人員
run(gen);//幫助突破技術瓶頸，提升思維能力
 

執行器 中的 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)
    }//歡迎加入全棧開發交流圈一起學習交流：864305860
  }//面向1-3年前端人員
} //幫助突破技術瓶頸，提升思維能力
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);
  })
 })
} //歡迎加入全棧開發交流圈一起學習交流：864305860
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 函式自帶了執行器！

結語

感謝您的觀看，如有不足之處，歡迎批評指正。

本次給大家推薦一個免費的學習群，裡面概括移動應用網站開發，css，html，webpack，vue node angular以及面試資源等。
對web開發技術感興趣的同學，歡迎加入Q群：864305860，不管你是小白還是大牛我都歡迎，還有大牛整理的一套高效率學習路線和教程與您免費分享，同時每天更新視訊資料。
最後，祝大家早日學有所成，拿到滿意offer，快速升職加薪，走上人生巔峰。