详解ES6中的三种异步解决方案

时间:2021-05-25

前置知识准备

  • 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 版的readFileconst 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 版的readFileconst 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 的更多用法 ,下次再写,欢迎关注我!

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

    声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

    相关文章