当前位置：网站首页>ES6高级-async的用法

ES6高级-async的用法

2022-08-04 21:30:00 【吃鱼丸的申申】

作用：使我们的异步操作更加方便，它会返回一个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>

输出结果：

 

原网站

版权声明
本文为[吃鱼丸的申申]所创，转载请带上原文链接，感谢
https://blog.csdn.net/qq_43781887/article/details/126166489

边栏推荐

猜你喜欢

随机推荐