async await promise.all 请求异步变成同步

最新推荐文章于 2024-02-19 22:53:06 发布

SpringYoungYu

最新推荐文章于 2024-02-19 22:53:06 发布

阅读量1.9k

点赞数

文章标签： js

本文链接：https://blog.csdn.net/qq_44917015/article/details/110195547

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        /* 
        一个需求需要分部完成
        每个步骤都是异步的
        并且严重依赖上一步执行结果
        稍有不慎就会进入回调地狱 （callback hell）
        这时就可以使用async/await 来完成；

         */
        async function submitData(){
            const res = await getAuth();
            if( res ){
                const data = await submit()
            }

        } 
        // 或者在vue中 做一些初始化的操作
        async function created(){
            const res = await this.init();
            const list = await this.getPage();
        }
        //但是就会陷入 async/await 地狱的诞生；
        /*上面的代码不是最佳实践 他把两个没有先后顺序的操做 
        强行变成同步操做 其实他们的工作可以同时进行
        所以我们需要并发执行的实例；
        上面的代码就可以写成

         */
        async function created() {
            // 他们都会返回一个promise对象
            const userInfo = this.getInfo();
            const list = this.getList();
            // 上面两个异步请求就可以同时就行
            // 下面需要等待结果
            await userInfo;
            await list;
            //  ... do sth
        }
        // 如果有很多的请求的情况 可以使用 Promise.all
        async function created() {
            Promise.all( [this.getInfo(),this.getList(),this.other()] )
            .then( ()=>{
                //... do sth
            } )
            //  ... do sth
        }
    </script>
</body>
</html>