前言

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

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

异步处理方式的改变。

API 介绍

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

fs.readdir

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

fs.stat

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

思路分析

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

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

然后我们直接上代码吧。

回调函数


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);
});

ES6 系列

ES6 系列目录地址:https://github.com/mqyqingfeng/Blog

ES6 系列预计写二十篇左右,旨在加深 ES6 部分知识点的理解,重点讲解块级作用域、标签模板、箭头函数、Symbol、Set、Map 以及 Promise 的模拟实现、模块加载方案、异步处理等内容。

如果有错误或者不严谨的地方,请务必给予指正,十分感谢。如果喜欢或者有所启发,欢迎 star,对作者也是一种鼓励。

来源:https://segmentfault.com/a/1190000016792362

ES6 系列之异步处理实战的更多相关文章

  1. ES6系列文章 异步神器async-await

    关于异步处理,ES5的回调使我们陷入地狱,ES6的Promise使我们脱离魔障,终于.ES7的async-await带我们走向光明.今天就来学习一下 async-await. async-await和 ...

  2. ES6 Generators的异步应用

    ES6 Generators系列: ES6 Generators基本概念 深入研究ES6 Generators ES6 Generators的异步应用 ES6 Generators并发 通过前面两篇文 ...

  3. ES6 系列之 Babel 是如何编译 Class 的(下)

    前言 ES5 寄生组合式继承 function Parent (name) { this.name = name; } Parent.prototype.getName = function () { ...

  4. ES6系列之项目中常用的新特性

    ES6系列之项目中常用的新特性 ES6常用特性 平时项目开发中灵活运用ES6+语法可以让开发者减少很多开发时间,提高工作效率.ES6版本提供了很多新的特性,接下来我列举项目中常用的ES6+的特性: l ...

  5. QT5 QSS QML界面美化视频课程系列 QT原理 项目实战 C++1X STL

    QT5 QSS QML界面美化视频课程系列 QT原理 项目实战 C++1X STL 课程1   C语言程序设计高级实用速成课程 基础+进阶+自学 课程2   C语言程序设计Windows GDI图形绘 ...

  6. 前端构建大法 Gulp 系列 (四):gulp实战

    前端构建大法 Gulp 系列 (一):为什么需要前端构建 前端构建大法 Gulp 系列 (二):为什么选择gulp 前端构建大法 Gulp 系列 (三):gulp的4个API 让你成为gulp专家 前 ...

  7. [js高手之路] es6系列教程 - 对象功能扩展详解

    第一:字面量对象的方法,支持缩写形式 //es6之前,这么写 var User = { name : 'ghostwu', showName : function(){ return this.nam ...

  8. [js高手之路] es6系列教程 - 迭代器,生成器,for...of,entries,values,keys等详解

    接着上文[js高手之路] es6系列教程 - 迭代器与生成器详解继续. 在es6中引入了一个新的循环结构for ....of, 主要是用来循环可迭代的对象,那么什么是可迭代的对象呢? 可迭代的对象一般 ...

  9. 大白话,讲编程之《ES6系列连载》汇总

    如果你经历过2,3年前的前端开发,你一定感受过兼容IE6,7的痛苦,一定用过网页三剑客的dreamweaver编写html,面试的时候面试官一定会问你:会用PS切图吗? 刚开始的时候你发现,web前端 ...

随机推荐

  1. 用户输入和while 循环

    input 工作原理 函数input()让程序暂停运行,等待用户输入一些文本.获取用户输入后,Python将其存储在一个变量中. message = input("need to input ...

  2. Python 爬虫十六式 - 第二式:urllib 与 urllib3

    Python请求标准库 urllib 与 urllib3 学习一时爽,一直学习一直爽!   大家好,我是 Connor,一个从无到有的技术小白.上一次我们说到了什么是HTTP协议,那么这一次我们就要动 ...

  3. 牛客网 TaoTao要吃鸡 ( 0/1背包变形 )

    题意 : 题目链接 分析 :  如果没有 BUG (即 h == 0 的时候)就是一个普通的 0 / 1 背包 需要讨论一下 h != 0 的情况 此时有就相当于有物品是有特权的 而且背包装有特权的物 ...

  4. BZOJ 4417 Luogu P3990 [SHOI2013]超级跳马 (DP、矩阵乘法)

    题目链接: (bzoj) https://www.lydsy.com/JudgeOnline/problem.php?id=4417 (luogu)https://www.luogu.org/prob ...

  5. 根据linux自带的JDK,配置JAVA_HOME目录

    在配置hadoop是,进行格式化hadoop的时候,出现找不到jdk 我用centos6.5是64位的, 发现本机有java ,就找了一下其位置 找到了jdk-1.7.0_75 which java ...

  6. Bug管理工具MantisBT-2.18.0安装教程

    Bug管理工具MantisBT安装教程 MantisBT官网下载地址:https://sourceforge.net/projects/mantisbt/# 写于:2018.12.1 如上传博客资料图 ...

  7. 取值函数(getter)和存值函数(setter)

    todo get和set关键字

  8. bootstrap editable 行内编辑

    除了那些bootstrap/bootstrap table的js , css之外,要额外添加editable的文件: <link href="../assets/css/bootstr ...

  9. [nginx] CORS配置多域名

    如下 server { listen 80; server_name www.your.com; root /data/web/www.your.com; access_log /var/log/ng ...

  10. 用JQuery获取事件源怎么写

    $(".btn").click(function(e){ // e 就是事件对象 e.target; // 事件的目标 dom e.currentTarget; // 事件处理程序 ...