詳解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 獲取該文件或者目錄的具體信息
- 將具體信息儲存起來
- 當(dāng)全部儲存起來后，篩選其中的是文件的信息
- 遍歷比較，找出最大文件
- 獲取并返回最大文件
然后我們直接上代碼吧。
回調(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，當(dāng)為 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)])
}
})
})
})
}
使用方式為：
// 查找當(dāng)前目錄最大的文件
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)文章
classList 是一個非常實用的工具,可以讓我們輕松地操作元素的類名,在使用 classList 時,我們可以通過 add、remove、toggle 和 contains 等方法來添加、刪除、切換和檢查類名,接下來我們詳細(xì)學(xué)習(xí)一下classList的使用方法以及相關(guān)方法,感興趣的朋友一起看看吧2023-10-10
js數(shù)組是js部分非常重要的知識，有時我們有這么個需求js數(shù)組刪除指定元素,下面這篇文章主要給大家介紹了關(guān)于js刪除數(shù)組中指定元素的幾種方式,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-01-01
這篇文章主要介紹了JavaScript實現(xiàn)頁面高亮操作提示和蒙板，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-01-01
實例分析eval的一些使用方法與技巧。2009-03-03
Webpack 之 babel-loader文件預(yù)處理器詳解
這篇文章主要介紹了Webpack 之 babel-loader文件預(yù)處理器詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了JavaScript中定義類的方式,結(jié)合實例形式分析了JavaScript實現(xiàn)面向?qū)ο箢惖亩x及使用相關(guān)技巧,并附帶了四種JavaScript類的定義方式,需要的朋友可以參考下2016-01-01
基于MooTools的很有創(chuàng)意的滾動條時鐘動畫
一款很有創(chuàng)意的時鐘js動畫.是利用系統(tǒng)滾動條來構(gòu)成一個 時:分:秒 的盤. 再利用滾動條的長度變化做過渡動畫.2010-11-11
詳解weex默認(rèn)webpack.config.js改造
本篇文章主要介紹了詳解weex默認(rèn)webpack.config.js改造，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
Bootstrap 中的導(dǎo)航組件都依賴同一個 .nav 類和ul，狀態(tài)類也是共用的。改變修飾類可以改變樣式。接下來通過本文給大家介紹bootstrap 導(dǎo)航組件使用方法，一起看看吧2017-01-01
這篇文章主要介紹了js函數(shù)柯里化的方法和作用,結(jié)合實例形式分析了js函數(shù)柯里化的方法、功能及操作注意事項,需要的朋友可以參考下2020-04-04