ES7 - async

作者: Hyso | 来源:发表于2019-04-12 15:40 被阅读0次

网易云音乐数据交互—async&await实现版
Vue接口调用方式（三）async/await用法
async/await
promise 和 async await比较
JavaScript 中 async 和 await 的基本理解
promise generator async
2019 小程序开发用 async/await 解决异步调用
第十八章 async函数
Async-await
Async的使用

async 基本使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script type="text/javascript">
        function f1() {
            return new Promise(resolve=>{
                setTimeout(()=>{
                    console.log('第一步');
                    resolve();
                }, 1000)
            })
        }

        function f2() {
            return new Promise(resolve=>{
                setTimeout(()=>{
                    console.log('第二步');
                    resolve();
                })
            }, 1000)
        }

        /*
        f1().then(res=>{
            return f2();
        }).then(res=>{
            console.log('已完成');
        }).catch(resError=>{
            console.log(resError);
        })
        */
        
        // 以上注释代码使用 async 实现
        (async function(){
            // await 表示其后面的函数（必须是 promise() 函数 或是 async function）是一个异步操作，下面 N 行的代码会在这个异步操作完成后再执行
            await f1();

            await f2();
            
            console.log('已完成');
        })()
        
    </script>
</body>
</html>

async 传递参数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script type="text/javascript">
        function f1() {
            return new Promise(resolve=>{
                setTimeout(()=>{
                    resolve('第一步');
                }, 1000)
            })
        }

        function f2() {
            return new Promise(resolve=>{
                setTimeout(()=>{
                    resolve('第二步');
                })
            }, 1000)
        }

        /*
        f1().then(res=>{
            console.log(res);

            return f2();
        }).then(res=>{
            console.log(res);

            console.log('已完成');
        }).catch(resError=>{
            console.log(resError);
        })
        */
        
        // 以上注释代码使用 async 实现
        // async ()=>{} <=> (async function(){})
        (async ()=>{
            // await 表示其后面的函数（必须是 promise() 函数 或是 async function）是一个异步操作，下面 N 行的代码会在这个异步操作完成后再执行
            var res1 = await f1();
            console.log(res1);
            
            var res2 = await f2();
            console.log(res2);

            console.log('已完成');
        })()
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script type="text/javascript">
        var person = {
            say: async()=>{
                var res = await (()=>{
                    return new Promise(resolve=>{
                        setTimeout(function() {
                            resolve('先说话');
                        }, 1000)
                    });
                })();

                console.log(res);
            },
            walk: async function() {
                var res = await (()=>{
                    return new Promise(resolve=>{
                        setTimeout(function() {
                            resolve('再走路');
                        }, 1000)
                    });
                })();

                console.log(res);
            }
        }

        /* 这种方式会报错
        (async function() {
            await person.say();

            await person.walk();
        })()
        */
    
        var fn = async function() {
            await person.say();

            await person.walk();
        };

        fn();
    </script>
</body>
</html>