前端异步流程处理，

前端异步流程处理，

1.传统的原生异步

• 回调函数

• 事件

2.使用异步流程工具

1.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( '任务三' )
      },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],() => {
​
    // })

2.es6 generator函数

例如：

    /* 
    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( '主线程任务' )

3.es6( 7 ) async 函数

例如：

      /* 
        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()

4.node.js中的 nextTick setImmudiate

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

例如：

 /* 
    Node.js提供的
    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");