zoukankan      html  css  js  c++  java
  • 前端的异步流程

    前端的异步流程

    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
    // 任务四
    
  • 相关阅读:
    管理学课程都包括哪些方面的内容?
    关于如何创业的好书推荐:《创业必读12篇》
    关于企业文化的书籍,这本最经典
    如何开展行政管理工作?这些书可以告诉你答案
    企业家必读书籍有哪些?适合企业高管看的书推荐
    如何学好PHP?
    现在入门还有必要学PHP吗?
    Python实现递归二分法查找
    SAP Control framework–CL_GUI_TOOLBAR
    SAP Control framework–DIALOGBOX_CONTAINER
  • 原文地址:https://www.cnblogs.com/xiaohanga/p/11147912.html
Copyright © 2011-2022 走看看