ES6 中的 三種非同步解決方案

小西在深圳發表於2018-06-25
非同步
部分案例來自 阮一峰 的ES6 教程

前置知識準備

  1. Generator 函式 執行會返回一個迭代器(Iterator), 在迭代器上可以呼叫  next() 方法, 執行下一個 yield  或 return
  2. 呼叫  next() 方法，會返回一個物件 {value: res, done: false}, value 的值 為 yield 之後表示式的值，done 的值 表示迭代器，是否已經執行完畢（最後一個yield  或 return ）
  3. 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);    
      (!result.done&&result.value) && result.value.then(next); 
  }  
  next();
}


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)
        }
    }
}

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 函式自帶了執行器！

這個話題，還可以衍生出 yield 的更多用法 ，下次再寫，歡迎關注我！


相關文章