前端的异步调用流程

前端的异步调用流程

• 要知道js脚本语言是单线程的，异步流程的指的就是就是将任务是放在异步队列中，异步队列只有在主线程执行完之后采取执行
• 异步队列的理解:
• js中异步队列可以分为两类,marcotask队列和microtask队列, marcotask队列里面包含有1.script中的所有同步代码,2.setTimeout,3. setInterval,4.setImmediate5. I/O操作, 6. UI渲染,而microtask队列主要是有1.process,2.nextTick, 3.promise等等, 异步队列执行的顺序主要是 先从marcotask中取出一个任务(第一次就是取出所有同步的代码),执行完成之后从microtask队列取出所有的任务,执行完成之后, 再从marcotask队列中取出一个, 循环往复,直到所有队列的任务被完成.

实现前端异步流程的方式

• 传统的原生异步

• 回调函数

• 事件

• 使用异步流程工具

• es6 Promise

• Promise 是异步编程的一种解决方案，比传统的解决方案–回调函数和事件－－更合理和更强大。它由社区最早提出和实现，ES6将其写进了语言标准，统一了语法，原生提供了Promise
  所谓Promise ，简单说就是一个容器，里面保存着某个未来才回结束的事件(通常是一个异步操作） 的结果。从语法上说，Promise是一个对象，从它可以获取异步操作的消息。

• 三种状态:

• pending：进行中

• fulfilled（resolve） :已经成功

• 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 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
  // 任务四