前端的异步流程

前端的异步流程

1.要知道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队列中取出一个, 循环往复,直到所有队列的任务被完成.

2.实现前端异步流程的方式

• ​ 传统的原生异步

  • 回调函数
  • 事件

• 使用异步流程工具

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