Promise 理解为什么Promise执行是同步，p.then 是异步

绝地灬酷狼 2022-11-06 03:59 220阅读 0赞

> Promise，异步问题同步化解决方案，Promise包裹异步程序，通过.then获取异步程序结果，  
> 并且不阻塞Promise相关的任何程序，和Promise相关的程序保持异步关系，只是顺便解决回调地狱

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    
    <body>
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    
        <script>
            // // 同步
            // const p = new Promise((resolve, reject) => { })
    
            // // 异步 
            // p.then((res) => { })
    
    
            // 问题：为什么Promise执行是同步，p.then 是异步
    
    
            // ==============================================
            // // 异步
            // $.ajax({ 
            // url: 'http://192.168.2.104:3000/data.json',
            // success(data) { 
            // console.log(getNames(data));
            // }
            // });
            // console.log('我是信息1');
    
    
    
            // // 同步
            // var data = $.ajax({ 
            // url: 'http://192.168.2.104:3000/data.json',
            // async: false
            // });
            // console.log('data',data.responseJSON);
            // console.log('我是信息2');
            // 我想先执行我是信息2， 在执行ajax请求
    
    
            // ==============================================
            // Promise，异步问题同步化解决方案，Promise包裹异步程序，通过.then获取异步程序结果，
            // 并且不阻塞Promise相关的任何程序，和Promise相关的程序保持异步关系，只是顺便解决回调地狱
    
            // const p = new Promise((resolve, reject) => { 
            // $.ajax({ 
            // url: 'http://localhost:3000/data.json',
            // success(data) { 
            // resolve(data)
            // }
            // })
            // });
            // p.then((res) => { 
            // console.log(getNames(res));
            // });
            // console.log('我是信息3');
            // function getNames(data) { 
            // return data.map(function (item) { 
            // return item.name
            // })
            // };
    
            // ==============================================
    
            function getData() { 
                return new Promise((resolve, reject) => { 
                    $.ajax({ 
                        url: 'http://localhost:3000/data.json',
                        success(data) { 
                            resolve(data)
                        }
                    })
                })
            }
    
            doSth()
    
            async function doSth() { 
                const data = await getData();
                console.log(getNames(data));
            }
    
            console.log('666');
    
            function getNames(data) { 
                return data.map(function (item) { 
                    return item.name
                })
            };
        </script>
    </body>
    
    </html>