详解ES6 系列之异步处理实战


Posted in Javascript onOctober 26, 2018

前言

我们以查找指定目录下的最大文件为例,感受从

回调函数 -> Promise -> Generator -> Async

异步处理方式的改变。

API 介绍

为了实现这个功能,我们需要用到几个 Nodejs 的 API,所以我们来简单介绍一下。

fs.readdir
readdir 方法用于读取目录,返回一个包含文件和目录的数组。

fs.stat
stat 方法的参数是一个文件或目录,它产生一个对象,该对象包含了该文件或目录的具体信息。此外,该对象还有一个 isFile() 方法可以判断正在处理的到底是一个文件,还是一个目录。

思路分析

我们基本的实现思路就是:

  • 用 fs.readdir 获取指定目录的内容信息
  • 循环遍历内容信息,使用 fs.stat 获取该文件或者目录的具体信息
  • 将具体信息储存起来
  • 当全部储存起来后,筛选其中的是文件的信息
  • 遍历比较,找出最大文件
  • 获取并返回最大文件

然后我们直接上代码吧。

回调函数

var fs = require('fs');
var path = require('path');

function findLargest(dir, cb) {
  // 读取目录下的所有文件
  fs.readdir(dir, function(er, files) {
    if (er) return cb(er);

    var counter = files.length;
    var errored = false;
    var stats = [];

    files.forEach(function(file, index) {
      // 读取文件信息
      fs.stat(path.join(dir, file), function(er, stat) {

        if (errored) return;

        if (er) {
          errored = true;
          return cb(er);
        }

        stats[index] = stat;

        // 事先算好有多少个文件,读完 1 个文件信息,计数减 1,当为 0 时,说明读取完毕,此时执行最终的比较操作
        if (--counter == 0) {

          var largest = stats
            .filter(function(stat) { return stat.isFile() })
            .reduce(function(prev, next) {
              if (prev.size > next.size) return prev
              return next
            })

          cb(null, files[stats.indexOf(largest)])
        }
      })
    })
  })
}

使用方式为:

// 查找当前目录最大的文件
findLargest('./', function(er, filename) {
  if (er) return console.error(er)
  console.log('largest file was:', filename)
});
Promise
var fs = require('fs');
var path = require('path');

var readDir = function(dir) {
  return new Promise(function(resolve, reject) {
    fs.readdir(dir, function(err, files) {
      if (err) reject(err);
      resolve(files)
    })
  })
}

var stat = function(path) {
  return new Promise(function(resolve, reject) {
    fs.stat(path, function(err, stat) {
      if (err) reject(err)
      resolve(stat)
    })
  })
}

function findLargest(dir) {
  return readDir(dir)
    .then(function(files) {
      let promises = files.map(file => stat(path.join(dir, file)))
      return Promise.all(promises).then(function(stats) {
        return { stats, files }
      })
    })
    .then(data => {

      let largest = data.stats
        .filter(function(stat) { return stat.isFile() })
        .reduce((prev, next) => {
          if (prev.size > next.size) return prev
          return next
        })

      return data.files[data.stats.indexOf(largest)]
    })

}

使用方式为:

findLargest('./')
.then(function(filename) {
  console.log('largest file was:', filename);
})
.catch(function() {
  console.log(error);
});
Generator
var fs = require('fs');
var path = require('path');

var co = require('co')

var readDir = function(dir) {
  return new Promise(function(resolve, reject) {
    fs.readdir(dir, function(err, files) {
      if (err) reject(err);
      resolve(files)
    })
  })
}

var stat = function(path) {
  return new Promise(function(resolve, reject) {
    fs.stat(path, function(err, stat) {
      if (err) reject(err)
      resolve(stat)
    })
  })
}

function* findLargest(dir) {
  var files = yield readDir(dir);
  var stats = yield files.map(function(file) {
    return stat(path.join(dir, file))
  })

  let largest = stats
    .filter(function(stat) { return stat.isFile() })
    .reduce((prev, next) => {
      if (prev.size > next.size) return prev
      return next
    })

  return files[stats.indexOf(largest)]

}

使用方式为:

co(findLargest, './')
.then(function(filename) {
  console.log('largest file was:', filename);
})
.catch(function() {
  console.log(error);
});
Async
var fs = require('fs');
var path = require('path');

var readDir = function(dir) {
  return new Promise(function(resolve, reject) {
    fs.readdir(dir, function(err, files) {
      if (err) reject(err);
      resolve(files)
    })
  })
}

var stat = function(path) {
  return new Promise(function(resolve, reject) {
    fs.stat(path, function(err, stat) {
      if (err) reject(err)
      resolve(stat)
    })
  })
}

async function findLargest(dir) {
  var files = await readDir(dir);

  let promises = files.map(file => stat(path.join(dir, file)))
  var stats = await Promise.all(promises)

  let largest = stats
    .filter(function(stat) { return stat.isFile() })
    .reduce((prev, next) => {
      if (prev.size > next.size) return prev
      return next
    })

  return files[stats.indexOf(largest)]

}

使用方式为:

findLargest('./')
.then(function(filename) {
  console.log('largest file was:', filename);
})
.catch(function() {
  console.log(error);
});

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

Javascript 相关文章推荐
使用jQuery模板来展现json数据的代码
Oct 22 Javascript
Ext JS添加子组件的误区探讨
Jun 28 Javascript
javaScript中的this示例学习详解及工作原理
Jan 13 Javascript
js中的preventDefault与stopPropagation详解
Jan 29 Javascript
Jquery操作Ajax方法小结
Nov 29 Javascript
AngularJs  unit-testing(单元测试)详解
Sep 02 Javascript
jQuery EasyUI 右键菜单--关闭标签/选项卡的简单实例
Oct 10 Javascript
jquery横向纵向鼠标滚轮全屏切换
Feb 27 Javascript
详解React-Native解决键盘遮挡问题(Keyboard遮挡问题)
Jul 13 Javascript
判断文字超过2行添加展开按钮,未超过则不显示,溢出部分显示省略号
Apr 28 Javascript
详解vite2.0配置学习(typescript版本)
Feb 25 Javascript
原生JavaScript实现简单五子棋游戏
Jun 28 Javascript
element-ui 的el-button组件中添加自定义颜色和图标的实现方法
Oct 26 #Javascript
angularjs通过过滤器返回超链接的方法
Oct 26 #Javascript
js使用formData实现批量上传
Mar 27 #Javascript
详解webpack打包时排除其中一个css、js文件或单独打包一个css、js文件(两种方法)
Oct 26 #Javascript
js自定义input文件上传样式
Oct 26 #Javascript
解决axios会发送两次请求,有个OPTIONS请求的问题
Oct 25 #Javascript
在Vue中使用axios请求拦截的实现方法
Oct 25 #Javascript
You might like
workerman结合laravel开发在线聊天应用的示例代码
2018/10/30 PHP
wordpress自定义标签云与随机获取标签的方法详解
2019/03/22 PHP
Yii框架的路由配置方法分析
2019/09/09 PHP
PHP配合fiddler抓包抓取微信指数小程序数据的实现方法分析
2020/01/02 PHP
学习JavaScript的最佳方法分享
2011/10/21 Javascript
eclipse如何忽略js文件报错(附图)
2013/10/30 Javascript
nw.js实现类似微信的聊天软件
2015/03/16 Javascript
JavaScript识别网页关键字并进行描红的方法
2015/11/09 Javascript
jQueryUI DatePicker 添加时分秒
2016/06/04 Javascript
js智能获取浏览器版本UA信息的方法
2016/08/08 Javascript
js实现上传图片预览方法
2016/10/25 Javascript
laydate.js日期时间选择插件
2017/01/04 Javascript
jQuery实现全选、反选和不选功能
2017/08/16 jQuery
使用3D引擎threeJS实现星空粒子移动效果
2020/09/13 Javascript
JS 数组和对象的深拷贝操作示例
2020/06/06 Javascript
Python3实现将文件归档到zip文件及从zip文件中读取数据的方法
2015/05/22 Python
Python统计日志中每个IP出现次数的方法
2015/07/06 Python
python检查URL是否正常访问的小技巧
2017/02/25 Python
Python使用matplotlib绘制正弦和余弦曲线的方法示例
2018/01/06 Python
Python3.7黑帽编程之病毒篇(基础篇)
2020/02/04 Python
python中delattr删除对象方法的代码分析
2020/12/15 Python
css3使用animation属性实现炫酷效果(推荐)
2020/02/04 HTML / CSS
html5使用canvas画空心圆与实心圆
2014/12/15 HTML / CSS
NFL加拿大官方网上商店:NHLShop.ca
2019/03/12 全球购物
在印度上传处方,在线订购药品:Medlife
2019/03/28 全球购物
优秀老师事迹材料
2014/02/05 职场文书
整顿机关作风心得体会
2014/09/10 职场文书
2014领导班子“四风问题”对照检查材料思想汇报(执法局)
2014/09/21 职场文书
2014年酒店前台工作总结
2014/11/14 职场文书
2014普法依法治理工作总结
2014/12/18 职场文书
2015年植树节活动总结
2015/02/06 职场文书
大国崛起英国观后感
2015/06/02 职场文书
背起爸爸上学观后感
2015/06/08 职场文书
休假证明书
2015/06/24 职场文书
卖车协议书范文
2016/03/23 职场文书
Linux安装Docker详细教程
2022/07/07 Servers