详解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 相关文章推荐
FireFox中textNode分片的问题
Apr 10 Javascript
使用jquery插件实现图片延迟加载技术详细说明
Mar 12 Javascript
JS获取当前网址、主机地址项目根路径
Nov 19 Javascript
JS中生成随机数的用法及相关函数
Jan 09 Javascript
jQuery实现简洁的轮播图效果实例
Sep 07 Javascript
解析预加载显示图片艺术
Dec 05 Javascript
从零开始学习Node.js系列教程四:多页面实现的数学运算示例
Apr 13 Javascript
jQuery回调方法使用示例
Jun 26 jQuery
JavaScript偏函数与柯里化实例详解
Mar 27 Javascript
JsonServer安装及启动过程图解
Feb 28 Javascript
javascript实现数字时钟效果
Feb 06 Javascript
js 执行上下文和作用域的相关总结
Feb 08 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
php利用单例模式实现日志处理类库
2014/02/10 PHP
PHP实现的交通银行网银在线支付接口ECSHOP插件和使用例子
2014/05/10 PHP
微信公众号点击菜单即可打开并登录微站的实现方法
2014/11/14 PHP
php模拟登陆的实现方法分析
2015/01/09 PHP
PHP实现支持SSL连接的SMTP邮件发送类
2015/03/05 PHP
Laravel框架实现model层的增删改查(CURD)操作示例
2018/05/12 PHP
window.open以post方式将内容提交到新窗口
2012/12/26 Javascript
计算新浪Weibo消息长度(还可以输入119字)
2013/07/02 Javascript
js/jquery去掉空格,回车,换行示例代码
2013/11/05 Javascript
node.js中的querystring.parse方法使用说明
2014/12/10 Javascript
AngularJS基础学习笔记之表达式
2015/05/10 Javascript
简单对比分析JavaScript中的apply,call与this的使用
2015/12/04 Javascript
微信小程序 加载 app-service.js 错误解决方法
2016/10/12 Javascript
javascript验证香港身份证的格式或真实性
2017/02/07 Javascript
JavaScript控制浏览器全屏显示简单示例
2018/07/05 Javascript
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
2018/08/09 jQuery
Vue中axios的封装(报错、鉴权、跳转、拦截、提示)
2019/08/20 Javascript
详解element上传组件before-remove钩子问题解决
2020/04/08 Javascript
vue 动态添加class,三个以上的条件做判断方式
2020/11/02 Javascript
python实现的登陆Discuz!论坛通用代码分享
2014/07/11 Python
Pthon批量处理将pdb文件生成dssp文件
2015/06/21 Python
Python学习小技巧之列表项的推导式与过滤操作
2017/05/20 Python
python 创建弹出式菜单的实现代码
2017/07/11 Python
基于Python下载网络图片方法汇总代码实例
2020/06/24 Python
逼真的HTML5树叶飘落动画
2016/03/01 HTML / CSS
加拿大在线眼镜零售商:SmartBuyGlasses加拿大
2019/05/25 全球购物
Feelunique澳大利亚:欧洲的化妆品零售电商
2019/12/18 全球购物
捷克购买家具网站:JENA nábytek
2020/03/19 全球购物
应届生.NET方向面试题
2015/05/23 面试题
sort命令的作用和用法
2012/11/04 面试题
法务专员岗位职责
2014/01/02 职场文书
大学迎新生标语
2014/10/06 职场文书
基于Pygame实现简单的贪吃蛇游戏
2021/12/06 Python
MySQL 开窗函数
2022/02/15 MySQL
Netty分布式客户端处理接入事件handle源码解析
2022/03/25 Java/Android
JavaScript实现音乐播放器
2022/08/14 Javascript