深入解析ES6中的三种异步解决方式

前置知识准备 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,快速升职加薪,走上人生巅峰。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值