前端异步

前端异步流程工具

1.传统原生异步：

回调函数
事件

2.使用异步流程工具（别人封装好的东西）
es6 Promise
Promise 是异步编程的一种解决方案，比传统的解决方案–回调函数和事件－－更合理和更强大。它由社区最早提出和实现，ES6将其写进了语言标准，统一了语法，原生提供了Promise

所谓Promise ，简单说就是一个容器，里面保存着某个未来才回结束的事件(通常是一个异步操作）的结果。从语法上说，Promise是一个对象，从它可以获取异步操作的消息。
Promise 对象的状态不受外界影响

三种状态:

pending：进行中
fulfilled :已经成功
rejected 已经失败
状态改变：
Promise对象的状态改变，只有两种可能：

从pending变为fulfilled
从pending变为rejected。
这两种情况只要发生，状态就凝固了，不会再变了，这时就称为resolved（已定型）

const p1 = new Promise(  (resolve,reject ) => {
 resolve('任务一')
}).then ( data => {
 console.log( data )
})

const p3 = new Promise( ( resolve,reject ) => {
 setTimeout( () => {
     resolve('任务三')
 },2000)
}).then ( data => {
 console.log(data)
})

const p2 = new Promise( (resolve,reject) => {
 setTimeout( () => {
     resolve('任务二')
 },1000 )
}).then ( data => {
 console.log(data)
})

console.log('主线程任务')

// 主线程任务
// 任务一
// 任务二
// 任务三

es6 generator函数
在function关键字后面加一个* 这样定义的函数就叫做generator函数
通过yield关键字来定义任务
通过fn().next() 来执行任务
value表示yield关键字后任务执行的结果
done表示当前定义的所有的任务是否执行完成的一个状态
理解：
多任务的定义，多任务执行
让自己定义的多个任务依次执行，上一个任务如果没有完成，下一个任务就不会开始

function* fn () {
    yield '任务一'
    yield '任务二'
    yield '任务三'
    return '任务'
}

const a = fn ()

console.log( a.next() )
console.log( a.next() )
console.log( a.next() )
console.log( a.next() )
console.log('主线程任务')

// { value: '任务一', done: false }
// { value: '任务二', done: false }
// { value: '任务三', done: false }
// { value: '任务', done: true }
// 主线程任务

es6( 7 ) async 函数
配合关键字await使用，await 表示，等待，任务一执行结束之后，才会执行任务二

async function fn () {
    const result = await '任务一'
    console.log( result )
    console.log('任务二')
}
fn()

const fn1 = async () => {
    const res = await '任务3'
    console.log( res )
    console.log( '任务四' )
}
fn1()

// 任务一
// 任务二
// 任务3
// 任务四

node.js中的 nextTick setImmudiate
nextTick > 回调函数 > setImmediate
nextTick()的回调函数执行的优先级要高于setImmediate();
process.nextTick()属于idle观察者,setImmediate()属于check观察者.在每一轮循环检查中,idle观察者先于I/O观察者,I/O观察者先于check观察者.
在具体实现上,process.nextTick()的回调函数保存在一个数组中,
setImmediate()的结果则是保存在链表中.
在行为上,process.nextTick()在每轮循环中会将数组中的回调函数全部执行完.
而setImmediate()在每轮循环中执行链表中的一个回调函数.

//加入2个nextTick()的回调函数
process.nextTick(function(){
console.log("nextTick延迟执行A");
});
process.nextTick(function(){
console.log("nextTick延迟执行B");
setImmediate(function(){
    console.log("setImmediate延迟执行C");
});
process.nextTick(function(){
    console.log("nextTick延迟执行D");
});
});
//加入两个setImmediate()回调函数
setImmediate(function(){
console.log("setImmediate延迟执行E");
process.nextTick(function(){
    console.log("强势插入F");
});
setImmediate(function(){
    console.log("setImmediate延迟执行G");
});
});
setImmediate(function(){
console.log("setImmediate延迟执行H");
process.nextTick(function(){
    console.log("强势插入I");
});
process.nextTick(function(){
    console.log("强势插入J");
});
setImmediate(function(){
    console.log("setImmediate延迟执行K");
});
});
console.log("正常执行L");

// 正常执行L
// nextTick延迟执行A
// nextTick延迟执行B
// nextTick延迟执行D
// setImmediate延迟执行E
// setImmediate延迟执行H
// setImmediate延迟执行C
// 强势插入F
// 强势插入I
// 强势插入J
// setImmediate延迟执行G
// setImmediate延迟执行K

第三方的 async.js 库
可以实现异步，串行series和并行parallel

const async = require( 'async' )

async.series({//串行series
  one: function ( callback ) {
    setTimeout( function () {
      callback( null, 1)
    },200)
  }, 
  two: function ( callback ) {
    setTimeout( function () {
      callback ( null , 2 )
    },100)
  } 
}, function ( error , results ) {
  console.log( 'series',results )
})

console.log( '主线程' )

async.parallel({//并行parallel
  one: function ( callback ) {
    setTimeout( function () {
      callback( null, 1)
    },200)
  }, 
  two: function ( callback ) {
    setTimeout( function () {
      callback ( null , 2 )
    },100)
  } 
}, function ( error , results ) {
  console.log( 'parallel',results )
})

// 主线程
// parallel { two: 2, one: 1 }
// series { one: 1, two: 2 }

也就是说：
异步流程的任务是放在异步队列中的，异步队列只有在主线程执行完之后采取执行
参考资料
Promise https://blog.csdn.net/MrJavaweb/article/details/79475949
Generator https://www.cnblogs.com/imwtr/p/5913294.html
Async-await
Node.js 中的nextTick()和setimmediate() https://www.cnblogs.com/5ishare/p/5268273.html
async库 https://caolan.github.io/async/
参考文档
Event-loop
http://www.ruanyifeng.com/blog/2014/10/event-loop.html?bsh_bid=983729729
史上最易读懂的 Promise/A+ 完全实现
https://zhuanlan.zhihu.com/p/21834559

前端异步流程工具

猜你喜欢