zoukankan      html  css  js  c++  java
  • 【JavaScript】--- ES6/ES7/ES8

    一、async
      async其实是ES7才有有的关键字,async的意思是异步,顾名思义是有关异步的操作

      async用于声明一个函数是异步的。

      通常情况下async、await都是跟随promise一起使用,因为async返回值都是一个promise对象,async适用于任何类型的函数上

    二、基本使用
      使用async其实很简单,只需要在函数前面加一个async即可,这个函数的返回值是一个promise

      

    //用来声明一个函数是异步的
    async function fn(){
        return 123;
    }
    
    //返回值是一个promise
    console.log(fn())
    /*
    Promise
        __proto__: Promise
        [[PromiseStatus]]: "resolved"
        [[PromiseValue]]: 123
    
    */
    
    //可以通过.then拿到返回值
    fn().then((data)=>{
        console.log(data);//123
    })

    三、await
      await关键字不能够单独使用,必须在async中进行使用
      await等待异步执行返回结果后才会执行下面的代码,其实await就是阻止主函数的运行

    function fn(){
        return new Promise((resolve)=>{
            setTimeout(()=>{
                   console.log(1111);
                   resolve()
            },2000)
        })
        
    }
    
    
    async function fn1(){
        await fn();
        setTimeout(()=>{
               console.log(2222);
        },1000)
    }
    
    fn1()

    四、如何实现多个异步同步执行

      

    function fn(){
        return new Promise((resolve)=>{
            setTimeout(()=>{
                   console.log(1111);
                   resolve()
            },3000)
        })
        
    }
    
    
    function fn1(){
        return new Promise((resolve)=>{
            setTimeout(()=>{
                   console.log(2222);
                   resolve()
            },2000)
        })
    }
    
    function fn2(){
        return new Promise((resolve)=>{
            setTimeout(()=>{
                   console.log(3333);
                   resolve()
            },1000)
        })
    }
    
    async function fn3(){
        await fn();
        await fn1();
        await fn2();
    }
    
    fn3()

    五、总结

      async函数完全可以看作多个异步操作,包装成的一个 Promise 对象,而await命令就是内部then命令的语法糖。

      因此如果需要实现多个异步同步执行必须每次await后都返回一个新的promise

  • 相关阅读:
    vue 组件之间的通讯方式
    vue 路由4种传参方式
    vue+axios封装已文件流的形式导出文件
    vue 开发环境正常打包之后背景图片无法访问或者element-ui的icon找不到
    vue 优化webpack引入CND
    microtime() — 返回当前 Unix 时间戳和微秒数
    将一个字符串分隔为组成它的字符
    Laravel 伪静态配置
    VSCode
    array_merge()&array_combine()合并数组函数
  • 原文地址:https://www.cnblogs.com/nanianqiming/p/10434911.html
Copyright © 2011-2022 走看看