前端的异步流程 （ 王牌 王者 ）

前端的异步流程 （ 王牌 王者 ）

1. 传统的原生异步

   • 回调函数
   • 事件

2. 使用异步流程工具（ 别人封装好的东西 ）

   • es6 Promise

     Promise 是异步编程的一种解决方案，比传统的解决方案–回调函数和事件－－更合理和更强大。它由社区最早提出和实现，ES6将其写进了语言标准，统一了语法，原生提供了Promise
   
     所谓Promise ，简单说就是一个容器，里面保存着某个未来才回结束的事件(通常是一个异步操作）的结果。从语法上说，Promise是一个对象，从它可以获取异步操作的消息。 
     Promise 对象的状态不受外界影响
   
     三种状态:
   
     pending：进行中
     fulfilled :已经成功
     rejected 已经失败
     状态改变： 
     Promise对象的状态改变，只有两种可能：
   
     从pending变为fulfilled
     从pending变为rejected。
     这两种情况只要发生，状态就凝固了，不会再变了，这时就称为resolved（已定型）
   

   • es6 generator函数
   • es6( 7 ) async 函数
   • node.js中的 nextTick setImmudiate

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

   nextTick > 回调函数 > setImmediate

   - 第三方的 async.js 库
   
   
   

总结：
异步流程的任务是放在异步队列中的，异步队列只有在主线程执行完之后采取执行
3. 参考资料

1. Promise
   https://blog.csdn.net/MrJavaweb/article/details/79475949

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

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

const p2 = new Promise( ( resolve,reject ) => {
  setTimeout( () => {

    resolve( '任务二' )
  },2000)
}).then ( data => {
  console.log( data )
})


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


//all 执行所有  race谁快先输出谁

Promise.all( [p1,p2,p3],() => {
  console.log( '任务四' )
})

// Promise.race( [p1,p2,p3],() => {

// })

1. Generator
   https://www.cnblogs.com/imwtr/p/5913294.html

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

2. Async-await

   
    async函数
       es6提供
       配合关键字  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()和setimmediate()
   https://www.cnblogs.com/5ishare/p/5268273.html

4. 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