前端的异步流程
前端的异步流程
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
// 任务四
