詳解ES6 系列之異步處理實戰(zhàn)
更新時間：2018年10月26日 09:32:05 作者：冴羽
這篇文章主要介紹了詳解ES6 系列之異步處理實戰(zhàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
前言
我們以查找指定目錄下的最大文件為例，感受從
回調(diào)函數(shù) -> Promise -> Generator -> Async
異步處理方式的改變。
API 介紹
為了實現(xiàn)這個功能，我們需要用到幾個 Nodejs 的 API，所以我們來簡單介紹一下。
fs.readdir
readdir 方法用于讀取目錄，返回一個包含文件和目錄的數(shù)組。
fs.stat
stat 方法的參數(shù)是一個文件或目錄，它產(chǎn)生一個對象，該對象包含了該文件或目錄的具體信息。此外，該對象還有一個 isFile() 方法可以判斷正在處理的到底是一個文件，還是一個目錄。
思路分析
我們基本的實現(xiàn)思路就是：
- 用 fs.readdir 獲取指定目錄的內(nèi)容信息
- 循環(huán)遍歷內(nèi)容信息，使用 fs.stat 獲取該文件或者目錄的具體信息
- 將具體信息儲存起來
- 當全部儲存起來后，篩選其中的是文件的信息
- 遍歷比較，找出最大文件
- 獲取并返回最大文件
然后我們直接上代碼吧。
回調(diào)函數(shù)
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 個文件信息，計數(shù)減 1，當為 0 時，說明讀取完畢，此時執(zhí)行最終的比較操作
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);
});
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了基于JS實現(xiàn)根據(jù)密碼長度顯示安全條功能，非常不錯，在一些網(wǎng)站上經(jīng)常會遇到此功能，需要的的朋友參考下實現(xiàn)代碼吧2017-03-03
JavaScript的級聯(lián)函數(shù)用法簡單示例【鏈式調(diào)用】
這篇文章主要介紹了JavaScript的級聯(lián)函數(shù)用法,結(jié)合簡單實例形式分析了javascript鏈式調(diào)用具體定義及使用方法,需要的朋友可以參考下
2019-03-03 
這篇文章主要介紹了JavaScript oncopy事件用法實例解析,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
2020-05-05 
JavaScript校驗Number(4,1)格式的數(shù)字實例代碼
這篇文章主要介紹了JavaScript校驗Number(4,1)格式的數(shù)字實例代碼,本文實現(xiàn)思路明確代碼簡單易懂，非常不錯，具有參考借鑒價值，需要的朋友可以參考下
2017-03-03 
JavaScript Date對象詳解及時間戳和時間的相互轉(zhuǎn)換問題
這篇文章主要介紹了JavaScript Date對象詳解及時間戳和時間的相互轉(zhuǎn)換問題,本文給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧
2024-01-01 
在JavaScript中==運算符和===運算符是經(jīng)常遇到的，那么二者有哪些區(qū)別呢，本文就來和大家進行簡單的討論，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)學(xué)習(xí)
2023-05-05 
JS中把字符轉(zhuǎn)成ASCII值的函數(shù)示例代碼
這篇文章主要是對JS中把字符轉(zhuǎn)成ASCII值的函數(shù)示例代碼進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助
2013-11-11 
下面小編就為大家?guī)硪黄猨avascript作用域、作用域鏈(菜鳥必看)。小編覺得 挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-06-06 
JavaScript實現(xiàn)的斑馬線表格效果【隔行變色】
這篇文章主要介紹了JavaScript實現(xiàn)的斑馬線表格效果,通過javascript針對table表格的遍歷與運算實現(xiàn)隔行變色功能,非常簡單實用,需要的朋友可以參考下
2017-09-09