理解javascript async的用法


Posted in Javascript onAugust 22, 2017

写在前面

本文将要实现一个顺序读取文件的最优方法,实现方式从最古老的回调方式到目前的async,也会与大家分享下本人对于thunk库与co库的理解。实现的效果:顺序读取出a.txt与b.txt,将读出的内容拼接成为一个字符串。

同步读取

const readTwoFile = () => {
  const f1 = fs.readFileSync('./a.txt'),
    f2 = fs.readFileSync('./b.txt');
  return Buffer.concat([f1, f2]).toString();
};

这种方式最利于我们理解,代码也很清楚,没有过多的嵌套,很好的维护,但是这种有着最大的问题,那就是性能,node所倡导的就是异步i/o来处理密集i/o,而同步的读取,很大的程度上浪费着服务器的cpu,这种方式的弊端明显的大于好处,所以直接pass掉。(其实node的任何异步编程的解决方案的目标都是要达到同步的语义,异步的执行。)

利用回调读取

const readTwoFile = () => {
  let str = null;
  fs.readFile('./a.txt', (err, data) => {
    if (err) throw new Error(err);
    str = data;
    fs.readFile('./b.txt', (err, data) => {
      if (err) throw new Error(err);
      str = Buffer.concat([str, data]).toString();
    });
  });
};

利用回调的方式,实现起来很简单,直接的嵌套下去就好,但是这种情况下很容易造成的就是不易维护,难以读懂的情况,最为极致的情况的就是回调地狱。

Promise实现

const readFile = file => 
  new Promise((reslove, reject) => {
    fs.readFile(file, (err, data) => {
      if (err) reject(err);
      reslove(data);
    });
  });
const readTwoFile = () => {
  let bf = null;
  readFile('./a.txt')
    .then(
      data => {
        bf = data;
        return readFile('./b.txt');
      }, 
      err => { throw new Error(err) }
    )
    .then(
      data => {
        console.log(Buffer.concat([bf, data]).toString())
      }, 
      err => { throw new Error(err) }
    );
};

Promise可以将横向增长的回调转化为纵向增长,能解决一些问题,但是Promise造成的问题就是代码冗余,一眼看过去,全部是then,也不是很爽,但是相比于回调函数嵌套来说,已经有了很大的提升。

yield

Generator很多语言中都有,本质上是协程,下面就来看一下协程,线程,进程的区别与联系:

  • 进程:操作系统中分配资源的基本单位
  • 线程:操作系统中调度资源的基本单位
  • 协程:比线程更小的的执行单元,自带cpu上下文,一个协程一个栈

一个进程中可能存在多个线程,一个线程中可能存在多个协程,进程、线程的切换由操作系统控制,而协程的切换由程序员自身控制。异步i/o利用回调的方式来应对i/o密集,同样的使用协程也可以来应对,协程的切换并没有很大的资源浪费,将一个i/o操作写成一个协程,这样进行i/o时可以吧cpu让给其他协程。

js同样支持协程,那就是yield。使用yield给我们直观的感受就是,执行到了这个地方停了下来,其他的代码继续跑,到你想让他继续执行了,他就是会继续执行。

function *readTwoFile() {
  const f1 = yield readFile('./a.txt');
  const f2 = yield readFile('./b.txt'); 
  return Buffer.concat([f1, f2]).toString();
}

yield下的顺序读取呈现的也是一种顺序读取的方式,对于readFile来看有两种不同的实现方式,

利用thunkify

const thunkify = (fn, ctx) => (...items) => (done) => {
  ctx = ctx || null;
  let called = false;
  items.push((...args) => {
    if (called) return void 0;
    called = true;
    done.apply(ctx, args);
  });
  try {
    fn.apply(ctx, items);  
  } catch(err) {
    done(err);
  }
};

thunkify函数就是一种柯里化得思想,最后的传入参数done就为回调函数,利用thunkify可以很轻松的实现yield函数的自动化流程:

const run = fn => {
  const gen = fn();
  let res;
  (function next(err, data) {
    let g = gen.next(data);
    if (g.done) return void 0;
    g.value(next);
  })();
};

利用Promise

const readFile = file => 
  new Promise((reslove, reject) => {
    fs.readFile(file, (err, data) => {
      if (err) reject(err);
      reslove(data);
    });
  });
const run = fn => {
  const gen = fn();
  let str = null;
  (function next(err, data) {
    let res = gen.next(data);
    if (res.done) return void 0;
    res.value.then(
      data => {
        next(null, data);
      }, 
      err => { throw new Error(err); }
    );
  })();
};
run(readTwoFile);

上面两种方式都可以达到自动执行yield的过程,那么有没有一种方式,可以兼容这两种实现方式呢,tj大神又给出了一个库,那就是co库,先来看下用法:

// readTwoFile的实现与上面类似,readFile既可以利用Promise也可以利用thunkify
// co库返回一个Promise对象
co(readTwoFile).then(data => console.log(data));

来看下co库的实现,co库默认会返回一个Promise对象,对于yield之后的值(如上面的res.value),co库会将其转换为一个Promise。实现思想很简单,基本还是利用递归的方式,大体的思路如下:

const baseHandle = handle => res => {
  let ret;
  try {
    ret = gen[handle](res);
  } catch(e) {
    reject(e);
  }
  next(ret);
};
function co(gen) {
  const ctx = this,
    args = Array.prototype.slice.call(arguments, 1);
  return new Promise((reslove, reject) => {
    if (typeof gen === 'function') gen = gen.apply(ctx, args);
    if (!gen || typeof gen.next !== 'function') return resolve(gen);

    const onFulfilled = baseHandle('next'),
      onRejected = baseHandle('throw');

    onFulfilled();

    function next(ret) {
      if (ret.done) reslove(ret.value);
      // 将yield的返回值转换为Proimse
      const value = toPromise.call(ctx, ret.value);
      if (value && isPromise(value)) return value.then(onFulfilled, onRejected);
      return onRejected(new TypeError('yield type error'));
    }
  });
}

toPromise就是将一些类型转换为Promise,从这里我们可以看出的是可以将哪些类型放在yield后面,这里就来看一个常用的:

// 把thunkify之后的函数转化为Promise的形式
function thunkToPromise(fn) {
  const ctx = this;
  return new Promise(function (resolve, reject) {
    fn.call(ctx, function (err, res) {
      if (err) return reject(err);
      if (arguments.length > 2) res = slice.call(arguments, 1);
      resolve(res);
    });
  });
}

最近Node已经支持了async/await,可以利用其来做异步操作:

终极解决

const readFile = file => 
  new Promise((reslove, reject) => {
    fs.readFile(file, (err, data) => {
      if (err) reject(err);
      reslove(data);
    });
  });
const readTwoFile = async function() {
  const f1 = await readFile('./a.txt');
  const f2 = await readFile('./b.txt');  
  return Buffer.concat([f1, f2]).toString();
};
readTwoFile().then(data => {
  console.log(data);
});

async/await做的就是将Promise对象给串联起来,避免了then的调用方式,代码非常的易读,就是一种同步的方式。不再需要借助其他外界类库(比如co库)就可以优雅的解决回调的问题。

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

Javascript 相关文章推荐
js字符串的各种格式的转换 ToString,Format
Aug 08 Javascript
JavaScript高级程序设计 客户端存储学习笔记
Sep 10 Javascript
JavaScript自定义方法实现trim()、Ltrim()、Rtrim()的功能
Nov 03 Javascript
JavaScript中iframe实现局部刷新的几种方法汇总
Jan 06 Javascript
基于Bootstrap重置输入框内容按钮插件
May 12 Javascript
微信小程序 框架详解及实例应用
Sep 26 Javascript
微信小程序 弹框和模态框实现代码
Mar 10 Javascript
JS实现加载时锁定HTML页面元素的方法
Jun 24 Javascript
vuejs 动态添加input框的实例讲解
Aug 24 Javascript
js实现简单掷骰子效果
Oct 24 Javascript
webpack常用构建优化策略小结
Nov 21 Javascript
vue实现简易图片左右旋转,上一张,下一张组件案例
Jul 31 Javascript
React Native之TextInput组件解析示例
Aug 22 #Javascript
EasyUI的DataGrid每行数据添加操作按钮的实现代码
Aug 22 #Javascript
浅谈箭头函数写法在ReactJs中的使用
Aug 22 #Javascript
Extjs 中的 Treepanel 实现菜单级联选中效果及实例代码
Aug 22 #Javascript
bootstrap3-dialog-master模态框使用详解
Aug 22 #Javascript
关于JS与jQuery中的文档加载问题
Aug 22 #jQuery
bootstrap confirmation按钮提示组件使用详解
Aug 22 #Javascript
You might like
暴雪前总裁遗憾:没尽早追赶Dota 取消星际争霸幽灵
2020/03/08 星际争霸
PHP中Date()时间日期函数的使用方法小结
2011/04/20 PHP
PHP排序算法的复习和总结
2012/02/15 PHP
Php output buffering缓存及程序缓存深入解析
2013/07/15 PHP
php清空(删除)指定目录下的文件,不删除目录文件夹的实现代码
2014/09/04 PHP
浅谈mysql_query()函数的返回值问题
2016/09/05 PHP
Laravel等框架模型关联的可用性浅析
2019/12/15 PHP
PHP使用PhpSpreadsheet操作Excel实例详解
2020/03/26 PHP
Javascript 写的简单进度条控件
2008/01/22 Javascript
JS实现淘宝幻灯片效果的实现方法
2013/03/22 Javascript
js简单实现用户注册信息的校验代码
2013/11/15 Javascript
javascript中HTMLDOM操作详解
2014/12/11 Javascript
js停止冒泡和阻止浏览器默认行为的简单方法
2016/05/15 Javascript
JavaScript动态添加css样式和script标签
2016/07/19 Javascript
微信开发 js实现tabs选项卡效果
2016/10/28 Javascript
js实现密码强度检验
2017/01/15 Javascript
利用n工具轻松管理Node.js的版本
2017/04/21 Javascript
js实现文字列表无缝滚动效果
2017/06/23 Javascript
BootStrap TreeView使用实例详解
2017/11/01 Javascript
如何进行微信公众号开发的本地调试的方法
2019/06/16 Javascript
javascript实现简单搜索功能
2020/03/26 Javascript
javascript递归函数定义和用法示例分析
2020/07/22 Javascript
Vue实现腾讯云点播视频上传功能的实现代码
2020/08/17 Javascript
结合axios对项目中的api请求进行封装操作
2020/09/21 Javascript
编写简单的Python程序来判断文本的语种
2015/04/07 Python
Python中的几种矩阵乘法(小结)
2019/07/10 Python
Python解析json代码实例解析
2019/11/25 Python
python中seaborn包常用图形使用详解
2019/11/25 Python
python3+opencv 使用灰度直方图来判断图片的亮暗操作
2020/06/02 Python
python 实现单例模式的5种方法
2020/09/23 Python
数学与统计学院学生个人职业生涯规划书
2014/02/10 职场文书
反四风个人对照检查材料
2014/09/26 职场文书
乡村教师党员四风问题对照检查材料思想汇报
2014/10/08 职场文书
优秀党支部申报材料
2014/12/24 职场文书
Python pandas读取CSV文件的注意事项(适合新手)
2021/06/20 Python
javascript进阶篇深拷贝实现的四种方式
2022/07/07 Javascript