zoukankan      html  css  js  c++  java
  • ES7 语法详解(async 与 await(重点))

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
        </head>
        <body>
        </body>
        <script type="text/javascript">
            /**
             * async函数(源自ES2017)
             * 概念: 真正意义上去解决异步回调的问题, 同步流程表达异步操作
             * 本质: Generator的语法糖
             * 语法:
             *     async function foo() {
             *      await 异步操作
             *         await 异步操作 
             *  }
             * 特点:
             * 1. 不需要像Generator去调用next方法,遇到await等待,当前的异步操作完成就往下执行
             * 2. 返回的总是Promise对象, 可以用then方法进行下一步操作
             * 3. async取代Generator函数的星号* , await取代Generator的yield
             * 4. 语义上更为明确,使用简单,经临床试验,暂时没有任何副作用以及不良反应
             */
            
            // 定义async 函数
            async function foo(){
                return new Promise(resolve => setTimeout(() => {
                    resolve('成功')
                },2000))
            }
            
            // 定义普通函数
            function fooSrc(){
                return 'xxx'
            }
            
            async function test(){
                console.log('开始执行')
                // 会得到函数的执行结果
                let result = await foo()
                console.log(result)
                result = await fooSrc()
                console.log(result)
                console.log('执行完成')
            }
            test()    
        </script>
    </html>

    为什么要写这个ES7的这个知识点呢,是这样的,因为现在这个async函数 与 await已经使用非常广泛了,它的出现就是解决了ES6中的Generator函数的问题,每次都需要调用next方法,这个也是重点知识,至于其他的ES7-ES11的知识点暂时就不写了,这些暂时也够用了,等之后项目碰到了,再恶补一下[手动滑稽]

    附送小知识点, ES7 指数运算符

    console.log(3 ** 3) // 27 = 3 * 3 * 3

    作者:彼岸舞

    时间:2021816

    内容关于:前端知识库

    本文属于作者原创,未经允许,禁止转发

  • 相关阅读:
    Webpack-simple cross-env 不是内部或外部命令问题处理
    Webstorm快捷键整理
    Maven导入ojdbc14.jar和ojdbc6.jar
    spring配置datasource三种方式 数据库连接池
    oracle存储过程中使用execute immediate执行sql报ora-01031权限不足的问题
    Java String内存释放
    Sublime Text 3 添加到右键菜单
    Oracle date 和 timestamp 区别
    查看JVM内存使用情况
    bzoj1513【POI2006】Tet-Tetris 3D
  • 原文地址:https://www.cnblogs.com/flower-dance/p/15150341.html
Copyright © 2011-2022 走看看