js 异步函数 async function 变同步函数 简单入门

 

js 中异步函数之所以特别，一个重要的原因就是它执行完成的时间、耗费的时间靠人的主观是不得而知的。所以不能靠设置定时函数来让上一个程式完成之后来进行下一个函数。

接上次的博客：https://blog.csdn.net/qq_33286757/article/details/111302329

所以 promise 就突出了它的作用，目前程式执行在那个阶段 结果是什么 promise 知道。新建一个 promise 对象。

new Promise(function (resolve, reject) {
    // 要做的事情...
});

尝试一个 ajix 请求

<script>
    var goodsInfo = {};
    $(document).ready(function(){
    //    使用Promise
    new Promise(function (resolve,reject) {
            $.ajax({url:"https://api-hmugo- web.itheima.net/api/public/v1/home/catitems",success:function(result){
                    goodsInfo = result;
                    resolve(goodsInfo);
                    console.log(goodsInfo);
                }});
        }).then(function () {
            console.log(goodsInfo);
        })
        console.log(1);
        console.log(goodsInfo);
    });
</script>

看是不是在 .then() 中得到了经过ajax请赋值后的全局变量 goodsInfo 的值，如果再有什么对 goodsInfo 的操作，在 .then 中进行即可。ajax在项目会频繁使用，将其封装成一个函数会更方便

<script>

    var goodsInfo = {};
    $(document).ready(function(){

// 封装一个 promise 函数，在promiise对象前面多加了一个return
        function promiseFun (url){
            return new Promise(function (resolve,reject) {
                $.ajax({url:url,success:function(result){
                        goodsInfo = result;
                        resolve(goodsInfo);
                        console.log(goodsInfo);
                    }});
            })
        }
// 调用函数
        promiseFun("https://api-hmugo-web.itheima.net/api/public/v1/home/catitems").then(function () {
            console.log(goodsInfo);
        })
        console.log(1);
        console.log(goodsInfo);
    });
</script>

结果依然一样。调用的时候是不是又简约一点。 async function 感觉是又进了异步

// 定义规则
async function asyncFunc() {
    // await 后面必须是定义过的 promise function 
    await myfunction();
    await youfunction();
    await shefunction();
    somefunction();
    xxxxxx;
    
}
asyncFunc();

<script>
    var goodsInfo = {};
    var data ={};
    $(document).ready(function(){
// 先定义一个 promise function
        function promiseFun (url){
            return new Promise(function (resolve,reject) {
                $.ajax({url:url,success:function(result){
                        goodsInfo = result;
                        resolve(goodsInfo);
                        console.log(goodsInfo);
                    }});
            })
        }
// 在定义一个 asyns function 
     async function asyncFuunc(){
// 看这里面的代码执行顺序是不是跟同步函数简直一模一样
            await promiseFun("https://api-hmugo-web.itheima.net/api/public/v1/home/catitems");
            console.log(goodsInfo);
            data=goodsInfo;
            console.log(data)
            console.log(2);
     }
// 调用 asyns 函数
        asyncFuunc();
        console.log(1);
        console.log(goodsInfo);
    });
</script>