前端异步流程工具
2019-05-16 12:03
218 查看
传统异步处理
- 回调函数
- 事件
- 计时器
流行的异步处理
- Promise
- Generator 函数
- Async 函数
- Nodejs 自带多大的异步处理工具 nextTick,setimmidate
- 第三方 async.js 库
Promise
const p2 = new Promise(function(resolve, reject) { setTimeout(function() { resolve('任务1') }, 1000) }) .then(function(data) { console.log(data) }) const p1 = new Promise(function(resolve, reject) { resolve('任务2') }) .then(function(data) { console.log(data) }) console.log('主线程任务 ') //Promise的all函数 Promise .all([p1, p2]) // 先执行all中所有任务, 执行完成之后再去执行后面的任务 .then(data => { console.log('任务3') }) //Promise的race函数 Promise .race([p1, p2]) // race 谁快输出谁 .then(data => { console.log('任务4') }) 结果:主线程 任务2 任务4 任务1 任务3
Generator
- 概念, 在function 关键字后面写一个* ,表示一个generator函数
- generator通过 yield/return 关键字来定义任务
- 通过next()来执行任务,它是一个对象
{ value:任务名,done:false/true}
//当所有的异步任务完成时done的值就会变成true
function* p1 () { yield '任务1'; yield '任务2'; yield function* p2() { yield '任务3' } return '任务4' } var p = p1() console.log(p.next()) console.log(p.next()) console.log(p.next()) console.log(p.next())
Async函数
- async函数是由es7提供的
- async函数的底层其实就是generator函数
- async函数需要和关键字 await 搭配使用
- async也是Promise,也可以调用.then
格式
第一种格式 const asyncFn = async () => { await 任务 } 第二种格式 var obj = { async aa () { await 任务 } }
-
注意: 只有await后面的任务 顺利执行完成,那么下面的任务才会去执行,如果await后面的任务执行不顺利, 那么后面的任务会出问题
-
使用场景: 先进行数据请求,得到数据之后,在去操作这个数据 (把数据返回到外层时使用async)
const asyncFn = async () => { const request = await '任务一' console.log(' 任务2 ') console.log( request ) } asyncFn().then(()=>{ console.log("async任务结束")}) console.log( '主线程任务' ) 结果:主线程任务,任务2,任务1,任务结束 如果任务2和任务1的输出换位则 结果为:主线程任务,任务1,任务2,任务结束
Node提供的nextTick和setimmediate函数
nextTick
- nextTick函数属于process模块
- process模块挂载在全局对象global上,所以不需要模块化引入
- 语法:process.nextTick( callback )
setimmediate
- setimmediate函数直接挂载在全局对象global上,所以可以直接使用
- 语法: setImmediate( callback )
nextTick与setimmediate比较
- 优先级
nextTick()的回调函数 > setImmediate();
- 回调函数
- process.nextTick()的回调函数保存在一个数组中,
在每轮循环中会将数组中的回调函数全部执行完 - setImmediate()的结果则是保存在链表中,
在每轮循环中执行链表中的一个回调函数
- 执行顺序
- nextTick > setImmediate
- nextTick 中 的nextTick > 外层的setImmediate
- 外层setImmediate > 内层的setImmediate
nextTick与setimmediate的原理
- 轮询(上面说的每轮循环,字没敲错,查过了)
nodejs中是事件驱动(两大特征:事件驱动和非阻塞式I/O模型)的,有一个循环线程一直从事件队列中取任务执行或者I/O的操作转给后台线程池来操作,把这个循环线程的每次执行的过程算是一次轮询.
- 三个观察者 idle观察者: 事件轮询最先进行的任务
- I/O观察者: 事件轮询中的任务(任务中的回调函数)
- check观察者:事件轮询中的任务的结束
- idle > I/O > check
process.nextTick()函数属于idle观察者
setimmediate()函数属于check观察者
- setImmediate()
即时计时器立即执行工作,它是在事件轮询之后执行,为了防止轮询阻塞,每次只会调用一个
- Process.nextTick()
在事件轮询之前执行,为了防止I/O饥饿,所以有一个默认process.maxTickDepth=1000来限制事件队列的每次循环可执行的nextTick()事件的数目
测试
process.nextTick( function () { console.log('A') process.nextTick( function(){ console.log('D') }) setImmediate( function () { console.log('E') }) }) setImmediate( function () { console.log( 'B' ) process.nextTick( function(){ console.log('F') }) setImmediate( function () { console.log('G') }) }) process.nextTick( function () { console.log( 'C') }) console.log( '主线程任务' )
结果:主线程任务,A ,C,D,B,E,F,G
第三方的async函数
- 主要api series 串行
- parallel 并行
async.series({ 任务名称: 任务值 },function( err, data ) {})
async.parallel({ 任务名称: 任务值 },function( err, data ) {})
async函数使用步骤
- 项目根目录下 npm init -y
- npm i async -D / -S
- 在使用文件中 require(‘async’)引入
测试代码如下:
// series async.series({ one: function( callback ) { setTimeout ( function () { callback( null, '任务1' ) },2000) }, two: function ( callback ) { setTimeout ( function () { callback( null, '任务2') },1000) } },function ( err , data ) { console.log( data ) }) 结果:{ one: '任务1', two: '任务2' } 用时:3s+ // parallel var async = require( 'async' ) async.parallel({ one: function ( callback ) { setTimeout ( function () { callback( null , '任务1') },2000) }, two: function ( callback ) { setTimeout ( function () { callback( null , '任务2') },1000) } },function(error,data){ console.log( data ) console.log( '任务3' ) }) 结果:{ two: '任务2', one: '任务1' } , 任务3 用时:2s+
相关文章推荐
- IC设计前端到后端的流程和eda工具。
- 现代web前端开发工具和流程
- 异步流程控制工具的使用方法
- ic设计前端到后端的流程和eda工具?
- IC设计前端到后端的流程和eda工具。
- 异步流程工具
- 异步流程控制(js前端)
- 前端通过AJAX提交数据,后台PHP处理数据实现异步操作基本流程
- IC设计前端到后端的流程和EDA工具
- 学习安装gulp前端自动化工具步骤流程
- 亚信UED前端流程自动化构建工具
- [置顶] 高效前端优化工具--Fiddler入门教程
- 2017年超棒前端相关工具类库大荟萃
- webstorm11.0下载地址和webstorm11.0破解程序patcher.exe下载使用方法说明 前端IDE工具的利器
- 微信前端工具安装
- gRPC的使用(二)之异步服务器流RPC的使用流程
- livereload工具实现前端可视化开发【推荐】
- 常用的前端调试工具
- Visual Studio 2015和ASP.NET 5中可用的前端开发工具集
- JavaScript强化教程 —— 资源打包工具的使用及资源的异步加载处理