宜宾网站建设公司

ES6中的异步解决方案有哪些-创新互联

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

  if (result.done) return result.value;

  result.value.then(function(data) {
   next(data);
  });
 }
 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 函数自带了执行器！

看完上述内容，你们掌握ES6中的异步解决方案有哪些的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注创新互联成都网站设计公司行业资讯频道，感谢各位的阅读！

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。


网站栏目：ES6中的异步解决方案有哪些-创新互联
标题网址：http://ybzwz.com/article/djgcee.html

其他资讯