理解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 相关文章推荐
CSS+Jquery实现页面圆角框方法大全
Dec 24 Javascript
select、radio表单回显功能实现避免使用jquery载入赋值
Jun 08 Javascript
JavaScript中的undefined学习总结
Nov 30 Javascript
动态添加删除表格行的js实现代码
Feb 28 Javascript
使用PHP+JavaScript将HTML页面转换为图片的实例分享
Apr 18 Javascript
jquery实现弹窗功能(窗口居中显示)
Feb 27 Javascript
echart简介_动力节点Java学院整理
Aug 11 Javascript
Vue.directive 自定义指令的问题小结
Mar 04 Javascript
详解vue-cli3多页应用改造
Jun 04 Javascript
Vue.js获取手机系统型号、版本、浏览器类型的示例代码
May 10 Javascript
el-form 多层级表单的实现示例
Sep 10 Javascript
吃通javascript正则表达式
Apr 21 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
php5 pdo新改动加载注意事项
2008/09/11 PHP
一篇有意思的技术文章php介绍篇
2010/10/26 PHP
PHP+JS+rsa数据加密传输实现代码
2011/03/23 PHP
php写的简易聊天室代码
2011/06/04 PHP
php实现数组按指定KEY排序的方法
2015/03/30 PHP
一键生成各种尺寸Icon的php脚本(实例)
2017/02/08 PHP
详细解读php的命名空间(二)
2018/02/21 PHP
PHP使用标准库spl实现的观察者模式示例
2018/08/04 PHP
php查看一个变量的占用内存的实例代码
2020/03/29 PHP
IE不支持getElementsByClassName最终完美解决方案
2012/12/17 Javascript
删除Javascript Object中间的key
2014/11/18 Javascript
node.js中的fs.readlink方法使用说明
2014/12/17 Javascript
js+css简单实现网页换肤效果
2015/12/29 Javascript
整理AngularJS框架使用过程当中的一些性能优化要点
2016/03/05 Javascript
用jquery获取自定义的标签属性的值简单实例
2016/09/17 Javascript
详解js中常规日期格式处理、月历渲染和倒计时函数
2016/12/28 Javascript
jquery操作select取值赋值与设置选中实例
2017/02/28 Javascript
nodejs实现的连接MySQL数据库功能示例
2018/01/25 NodeJs
详解如何在Vue里建立长按指令
2018/08/20 Javascript
使用rollup打包JS的方法步骤
2018/12/05 Javascript
分享JS表单验证源码(带错误提示及密码等级)
2020/01/05 Javascript
vue中实现拖动调整左右两侧div的宽度的示例代码
2020/07/22 Javascript
关于反爬虫的一些简单总结
2017/12/13 Python
使用pandas对两个dataframe进行join的实例
2018/06/08 Python
Python实现的矩阵转置与矩阵相乘运算示例
2019/03/26 Python
python使用Qt界面以及逻辑实现方法
2019/07/10 Python
python3.6 tkinter实现屏保小程序
2019/07/30 Python
Python爬虫实现vip电影下载的示例代码
2020/04/20 Python
tensorflow 20:搭网络,导出模型,运行模型的实例
2020/05/26 Python
用CSS3实现无限循环的无缝滚动的示例代码
2017/11/01 HTML / CSS
微信端html5页面调用分享接口示例
2018/03/14 HTML / CSS
办公室主任先进事迹
2014/01/18 职场文书
计算机学生求职信范文
2014/01/30 职场文书
企业年会主持词
2014/03/27 职场文书
教师远程培训心得体会
2016/01/09 职场文书
导游词之南京汤山温泉
2019/11/26 职场文书