>  기사  >  웹 프론트엔드  >  ES6에서의 비동기 처리에 대한 예제 설명

ES6에서의 비동기 처리에 대한 예제 설명

不言
不言앞으로
2018-10-25 16:04:151407검색

이 기사는 ES6에서의 비동기 처리에 대한 예제 설명을 제공합니다. 이는 특정 참고 가치가 있습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

서문

콜백 함수 -> 생성기 -> Async

의 비동기 처리 방법 변경을 경험하기 위해 지정된 디렉터리에서 가장 큰 파일을 찾는 것을 예로 들어 보겠습니다.

API 소개

이 기능을 구현하기 위해서는 여러 Nodejs API를 사용해야 하므로 간단히 소개하겠습니다.

fs.readdir

readdir 메소드는 디렉토리를 읽고 파일과 디렉토리가 포함된 배열을 반환하는 데 사용됩니다.

fs.stat

stat 메소드의 매개변수는 파일 또는 디렉토리이며, 파일 또는 디렉토리에 대한 특정 정보가 포함된 객체를 생성합니다. 또한 이 개체에는 처리 중인 파일인지 디렉터리인지 확인할 수 있는 isFile() 메서드도 있습니다.

분석을 생각해보세요

기본 구현 아이디어는 다음과 같습니다.

  1. fs.readdir를 사용하여 지정된 디렉터리의 콘텐츠 정보를 얻습니다. fs.readdir 获取指定目录的内容信息

  2. 循环遍历内容信息,使用 fs.stat

  3. 콘텐츠 정보를 반복하고 를 사용합니다. fs.stat 파일이나 디렉터리의 특정 정보를 가져옵니다

  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)]

}
사용 방법:

아아아아

https:// /github.com/mqyqingfeng/Blog🎜🎜🎜

위 내용은 ES6에서의 비동기 처리에 대한 예제 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
이 기사는 segmentfault.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제