快捷導(dǎo)航

詳解ES6中的三種異步解決方案

更新時(shí)間：2018年06月28日 08:56:54 作者：小西在深圳

這篇文章主要介紹了詳解ES6中的三種異步解決方案，詳細(xì)的介紹了這三種方案的實(shí)現(xiàn)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

前置知識(shí)準(zhǔn)備

Generator 函數(shù) 執(zhí)行會(huì)返回一個(gè)迭代器(Iterator), 在迭代器上可以調(diào)用 next() 方法, 執(zhí)行下一個(gè) yield 或 return
調(diào)用 next() 方法，會(huì)返回一個(gè)對(duì)象 {value: res, done: false} , value 的值為 yield 之后表達(dá)式的值，done 的值表示迭代器，是否已經(jīng)執(zhí)行完畢（最后一個(gè)yield 或 return ）
next() 方法，可以傳入一個(gè)值，做為前一個(gè)yield 表達(dá)式的返回值

有了這些知識(shí)，可以把Promise 對(duì)象做一個(gè)的 yield 的值，配合一個(gè)執(zhí)行器，來(lái)處理異步操作

方式一： Generator + Promise + 執(zhí)行器

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 的自動(dòng)執(zhí)行器
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);

執(zhí)行器中的 result.value 現(xiàn)在是一個(gè)Promise, 通過(guò) then 方法拿到需要的結(jié)果，傳下一次 next 方法，這樣 let f1 = yield readFile('a.txt'); 就可以拿到值！

方式二：Generator + Thunk函數(shù) + 執(zhí)行器

const fs = require('fs')

// 把一個(gè)單一執(zhí)行的函數(shù) ，變成需要再次調(diào)用的函數(shù)，固定一部分參數(shù)
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函數(shù)的自動(dòng)執(zhí)行器
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 轉(zhuǎn)換器，把原來(lái)的 fs.readFile 函數(shù) 轉(zhuǎn)換成需要兩次調(diào)用的函數(shù) ，readFile 的執(zhí)行結(jié)果，可以通過(guò)回調(diào)函數(shù)能參數(shù)傳遞出來(lái)，再傳給 next 方法

方式三：基于 async 函數(shù) 和 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 函數(shù) 對(duì)比方式一沒(méi)有大的變化，Generator 函數(shù)變成了 async 函數(shù)，可見(jiàn) 這處方式只是方式一的一個(gè)語(yǔ)法糖，async 函數(shù)自帶了執(zhí)行器！

這個(gè)話題，還可以衍生出 yield 的更多用法，下次再寫(xiě)，歡迎關(guān)注我！

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: