ES6 系列之異步處理實戰
阿新 • • 發佈:2018-12-25
比較 join yqi let 我們 對象 獲取 作者 rev
前言
我們以查找指定目錄下的最大文件
為例,感受從
回調函數 -> 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);
});
ES6 系列
ES6 系列目錄地址:https://github.com/mqyqingfeng/Blog
ES6 系列預計寫二十篇左右,旨在加深 ES6 部分知識點的理解,重點講解塊級作用域、標簽模板、箭頭函數、Symbol、Set、Map 以及 Promise 的模擬實現、模塊加載方案、異步處理等內容。
如果有錯誤或者不嚴謹的地方,請務必給予指正,十分感謝。如果喜歡或者有所啟發,歡迎 star,對作者也是一種鼓勵。
來源:https://segmentfault.com/a/1190000016792362
ES6 系列之異步處理實戰