js-ES6 異步處理實戰

我們以查找指定目錄下的最大文件為例，感受從

回調函數 -> 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);
});