ES6 系列之异步处理实战

最新推荐文章于 2023-03-17 20:52:14 发布
最新推荐文章于 2023-03-17 20:52:14 发布
阅读量440 收藏
点赞数
原文链接：https://github.com/mqyqingfeng/Blog/issues/101
版权 
 
 
 
  
作者：冴羽 ，原文：https://github.com/mqyqingfeng/Blog/issues/101
 
 
 
 
前言
 
 
我们以查找指定目录下的最大文件为例，感受从
 
 
回调函数 -> 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)])                }            })        })    })}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)});
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)]        })}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);});
.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)]}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);});
.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)]}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);});
.then(function(filename) {
console.log('largest file was:', filename);
})
.catch(function() {
console.log(error);
});
 
 
往期精文
 
 
1. 分享高效使用 Chrome 浏览器调试前端代码的技巧
 
 
2. ES6 系列之我们来聊聊 Promise
 
 
3. ES6 系列之我们来聊聊 Async
 
 
4. JavaScript 数据结构与算法之美 - 递归
 
 
 
  640?wx_fmt=png 
 
 
 

 


                

        

        

    

  


    

      

        

            

              
                
                  全栈修炼
                
              
            

            

                关注
              
            

        

        

          
      

      









                



	

		

			

				
					
ES6异步方案实现

				
			

			

				

					Science Explorer
				

				

					09-05
					
					706
					
				

			

		

		

			
				
promise

			
		

	



                

              
                



	

		

			

				
					
2024年前端最全深入理解ES6以后前端异步玩法async和await(1)，万字解析

					
最新发布

				
			

			

				

					2401_84617477的博客
				

				

					05-06
					
					1102
					
				

			

		

		

			
				
大厂面试问深度，小厂面试问广度，如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官，还要平时遇到问题后思考一下问题的本质，找方法解决是一个方面，看到问题本质是另一个方面。还有大家一定要有目标，我在很久之前就想着以后一定要去大厂，然后默默努力，每天看一些大佬们的文章，总是觉得只有再学深入一点才有机会，所以才有恒心一直学下去。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】深入理解ES6以后前端异步玩法async和await一、为啥要用异步玩法==========

			
		

	



                


  
              

                


	

		

			

				
					
ES6异步

				
			

			

				

					shuzipai的博客
				

				

					12-28
					
					592
					
				

			

		

		

			
				
我没法用比较标准的说法给你解释，我尽可能按我理解的说开始我一直很不理解什么叫“用同步的思想解决异步的问题”这句话，很抽象，一直不理解我有一个项目的代码在服务端运行需要同步调用接口，在客户端运行需要异步调用接口（其实都同步也可以，但是客户端为了提升体验）JS函数式编程嘛~我写了一个函数（如下，我手写，肯定不能运行）async get(async) {
  if (!async) {
    retu

			
		

	





	

		

			

				
					
两小时搞定ES6：原理讲解+项目实战

				
			

			

				

					程序员成长指北
				

				

					12-01
					
					343
					
				

			

		

		

			
				
ES6是咱前端必备的技能，不过，你真的理解ES6 的核心新特性吗？来测试一下，看看这几个问题：ES5和ES6的区别？说一下你所知道的ES6var、let、const之间的区别是什么？...

			
		

	



		

			
		



	

		

			

				
					
ES6中的异步

				
			

			

				

					weixin_34019929的博客
				

				

					12-27
					
					1652
					
				

			

		

		

			
				
  在ES6中，主要涉及到的异步有Promise对象，Generator函数和async函数。我主要会从各个的定义、特点以及涉及到的一些方法、原理等进行梳理。
Promise对象
定义：Promise是一个对象，里面保存着未来可能发生的事件。值得注意的是，定义Promise对象里的函数会立即执行。
 let promise = new Promise(function(resolve, rejec...

			
		

	





	

		

			

				
					
es6中的异步处理模型详解

				
			

			

				

					qq_41938120的博客
				

				

					04-09
					
					313
					
				

			

		

		

			
				
模型
1.es6将某一件可能发生异步操作的事情分为两个阶段：unsettled和settled。
unsettled：未决阶段，表示事情还在进行前期处理，还没有发生通向结果的事情
settled：已决阶段，表示事情已经有了结果，事情无法逆转

事情总是从未决到已决的，未决有控制何时到达已决的能力。
2.es6将事情划分为三种状态：pending、resolved、rejected

pending...

			
		

	





	

		

			

				
					
详解ES6 系列之异步处理实战

				
			

			

				

					12-11
				

			

		

		

			
				
异步处理方式的改变。 API 介绍  为了实现这个功能，我们需要用到几个 Nodejs 的 API，所以我们来简单介绍一下。 fs.readdir readdir 方法用于读取目录，返回一个包含文件和目录的数组。 fs.stat stat 方法的参数是...

			
		

	





	

		

			

				
					
ES6实战彩票系统项目

				
			

			

				

					04-05
				

			

		

		

			
				
ES6中的Promise是一种处理异步操作的新方式，它解决了回调地狱的问题，使得异步代码更加容易理解和维护。通过Promise，可以轻松地实现异步操作的链式调用，提高代码的可读性和可维护性。  #### 4. 类与面向对象编程 ...

			
		

	





	

		

			

				
					
19年录制ES6教程ES7ES8实战应用vue.js教程

				
			

			

				

					06-15
				

			

		

		

			
				
本教程聚焦于2019年录制的ES6、ES7和ES8的实战应用，并结合Vue.js框架进行深入讲解。ES6（ECMAScript 2015）是JavaScript语言的一个重大更新，引入了众多新特性，极大地提高了开发效率和代码可读性。而后续的ES7（ES...

			
		

	





	

		

			

				
					
ES6的异步处理

				
			

			

				

					weixin_34345753的博客
				

				

					03-10
					
					831
					
				

			

		

		

			
				
在学习ES6语法的过程中，一大难点异步处理promise的学习。所以今天就来详解的总结一下ES6中的异步处理。
同步异步
对于同步异步的概念先用白话简单的介绍一下。
同步：操作的执行有先后顺序，需要按顺序一个一个的执行。
异步：多个操作可以同时执行，且互不干扰。一般多用于数据交互。
相对比同步处理，异步处理性能好，效率高，用户体验也较好，但是之前异步操作都是通过回调函数来实现的，写起来比较复杂，可...

			
		

	





	

		

			

				
					
【实战】ES6从零开始基础+实战项目

				
			

			

				

					10-23
				

			

		

		

			
				
语法讲解，项目搭建，由浅入深..

			
		

	





	

		

			

				
					
Javascript – ES6 实战视频课程

				
			

			

				

					01-29
				

			

		

		

			
				
Javascript – ES6 实战视频课程

			
		

	





	

		

			

				
					
es6之异步编程

				
			

			

				

					weixin_52129860的博客
				

				

					03-17
					
					506
					
				

			

		

		

			
				
在实例化中，参数为函数，函数中又有两个用于回调的函数。两个回调函数中，resolve 为异步执行成功时的回调，其参数可以传递执行的结果。reject 为异步执行失败时的回调，其参数可以传递失败的错误信息。使用 resolve 和 reject 方法传递出去的参数被谁接收到了，是以何种方式接收的？接下来说下 then 方法。

			
		

	





	

		

			

				
					
ES6项目实战

				
			

			

				

					cyj5201314的博客
				

				

					04-24
					
					1492
					
				

			

		

		

			
				
es6 实战
前端启动

yarn install
yarn dev

后端启动

rollup -c -w (等待30s)
nodemon ./dist/bundle.js

后端 - node 框架；
Koa

express

Express 是一个保持最小规模的灵活的 Node.js Web 应用程序开发框架，为 Web 和移动应用程序提供一组强大的功能。
回调函数；
内置了很多 中间件；


koa

Koa 是一个新的 web 框架，由 Express 幕后的原班人马打造， 致力于成为 web 

			
		

	





	

		

			

				
					
ES6—异步解决方案

				
			

			

				

					whl0071的专栏
				

				

					08-17
					
					1841
					
				

			

		

		

			
				
ES6—异步解决方案

			
		

	





	

		

			

				
					
ES6解决异步问题

				
			

			

				

					qq_59494319的博客
				

				

					07-21
					
					466
					
				

			

		

		

			
				
ES6新增的promise以及练习题

			
		

	





	

		

			

				
					
ES6——异步处理与Promise

				
			

			

				

					xun__xing的博客
				

				

					08-10
					
					477
					
				

			

		

		

			
				
异步处理与Promise一、异步处理1.两个阶段2.事情三种状态3.到达阶段后续处理二、Promise1.基本使用2.注意点3.事件和回调的优化
一、异步处理

ES官方参考了大量的异步场景，总结出了一套异步的通用模型，该模型可以覆盖几乎所有的异步场景，甚至是同步场景。
值得注意的是，为了兼容旧系统，ES6 并不打算抛弃掉过去的做法，只是基于该模型推出一个全新的 API，使用该API，会让异步处理更加的简洁优雅。
理解该 API，最重要的，是理解它的异步模型

1.两个阶段
ES6 将某一件可能发生异步操作

			
		

	





	

		

			

				
					
ES6异步处理解决方案

				
			

			

				

					zhangjing1019的博客
				

				

					05-08
					
					573
					
				

			

		

		

			
				
ES6的异步处理模型分为俩个阶段三种状态。

两个阶段：未决unsettled, 已决settled。
三个状态：pending挂起状态 , resolved成功， rejected失败







通常把从未决推向已决的resolved状态的过程叫做resolve,从未决推向已决的rejected状态的过程,叫做reject







任务已决状态后可能需要后续处理，若任务成功了(resolved),有后续处理,如果任务失败了(rejected),仍然有后续处理,把针对resolved的后续...

			
		

	





	

		

			

				
					
Es6中处理异步的方式

				
			

			

				

					水痕
				

				

					07-13
					
					2585
					
				

			

		

		

			
				
一、在javascript中造成异步的因素
1、定时器
2、事件
二、使用Promise把异步变成同步
  参考文档1、关于promise的基本使用/**
 * Promise需要实例化对象
 * 里面是一个函数，
 * resolve是一个代表成功的函数,如果不调用这个函数，下面的函数无法继续进行
 * 下面只能打印"第一个定时器"
 * reject是一个代表失败的函数
 */
var prom

			
		

	





	

		

			

				
					
ES6异步处理实战：从回调到Async探索

				
			

			

				

					
				

			

		

		

			
				
本文将深入探讨ES6中的异步处理技术在实际项目中的应用，以查找指定目录下最大文件为例，逐步展示从传统回调函数、Promise、Generator到Async/await的不同处理方式。首先，文章引入了Node.js中的两个关键API：`fs....

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值