ES6高级-async的用法

最新推荐文章于 2023-05-20 17:14:47 发布

申申あ

最新推荐文章于 2023-05-20 17:14:47 发布

阅读量248

点赞数

分类专栏： ES6 文章标签： es6 前端 javascript

本文链接：https://blog.csdn.net/qq_43781887/article/details/126166489

版权

ES6 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

作用：使我们的异步操作更加方便，它会返回一个Promise对象，async是Generator的语法糖。

如果async函数中有多个await，那么then函数会等待所有的await指令运行完才去执行，看下面的代码：

<body>
    <script>
        async function f() {
            // 假设这是一次异步行为
            let s = await 'hello';
            // 假设这也是一次异步行为
            let data = await s.split('');
            return data;
        }
        f().then(v => console.log(v)).catch(e => console.log(e))
    </script>
</body>

输出结果：

再来看下面这段代码：

<body>
    <script>
        async function f() {      
            await Promise.reject('出错了');
            await Promise.resolve('hello');
        }    
        f().then(v => console.log(v)).catch(e => console.log(e))
    </script>
</body>

输出结果：

await有一个特点就是如果哪里返回的是失败就会不再往下执行，更改方法：

<body>
    <script>
        async function f() {      
            try {
                await Promise.reject('出错了');
            } catch (error) {

            }
            return await Promise.resolve('hello');
        }    
        f().then(v => console.log(v)).catch(e => console.log(e))
    </script>
</body>

再来看一个例子：

<body>
    <script>
        function testAwait() {
            return new Promise((resolve) => {
                setTimeout(function() {
                    console.log("testAwait");
                    resolve('sy!!!');
                }, 1000);
            });
        }
        async function helloAsync() {
            return await testAwait();
            console.log("helloAsync");
        }
        helloAsync().then(val => console.log(val));
    </script>
</body>

输出结果：