前端的异步调用流程

以你之姓@ 2024-03-22 13:39 115阅读 0赞

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

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

*  要知道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
        // 任务四