欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2024-02-02 22:52:10
前置知识准备 generator 函数 执行会返回一个迭代器(iterator), 在迭代器上可以调用  next() 方法, 执行下一个 yiel...

前置知识准备

  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 函数自带了执行器!

这个话题,还可以衍生出 yield 的更多用法 ,下次再写,欢迎关注我!

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