前端的异步流程

左手的ㄟ右手 2021-11-16 11:50 303阅读 0赞

### 前端的异步流程 ###

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

转载于:https://www.cnblogs.com/xiaohanga/p/11147912.html