蓝桥杯赛题——购物车

今天做了一道蓝桥杯的赛题，感觉自己思路都对但是页面渲染不出来，就很奇怪

比对别人通过的答案，思路基本一致，但是败在了一个细节上，就是发请求没有用异步，直接在created里面发请求

这是我原来的代码，效果图没出来

<script>
        new Vue({
            el: "#app",
            data: {
                carlist: [] //购物车列表
            },
            created() {
                // 在这里使用axios 发送请求
                axios.get('./carList.json').then(function(res){
                    console.log(res.data);
                    this.carlist=res.data;
                    //果然，这边获取到的this并不是vm实例对象，而是window
                }).catch(function(error){
                    console.log(error);
                })
            },
        })
    </script>

这是别人家的代码

    <script>
        new Vue({
            el: "#app",
            data: {
                carlist: [] //购物车列表
            },
            created() {
                // 在这里使用axios 发送请求
                this.getCarData();
            },
            methods:{
                async getCarData(){
                    const {data:res} = await axios.get("./carList.json")
                    this.carlist = res//这边的this就是vm实例对象
                    console.log(res)
                }
            }
        })
    </script>

​

所以可能涉及到async和await的妙用，但是我不理解为啥加了异步这个数据就可以渲染出来，其实我没有加异步的时候，数据也请求得到，但是渲染不到页面上

async的执行顺序（字节面试题

1. async声明的函数只是把该函数的return包装了，使得无论如何都会返回promise对象（非promise会转化为promise{resolve}），除此之外与普通函数没有不同，没有特殊待遇。

2. await声明只能用在async函数中。当执行async函数时，遇到await声明，会先将await后面紧跟着的内容按照平常的执行规则执行完，执行完后返回一个promise对象，并立即跳出async函数，让出线程，去执行主线程其他内容，等到主线程执行完再回到await处继续执行后面的内容。

async是在js加载好之后就会执行，并且多个async，哪个加载好就执行哪个

换而言之就是，async要等到js加载好才会执行，js没有加载好是不会执行这个函数的，那么上面两个案例对比就出来了，js加载好了之后this才是vm，在js加载完毕之前，this指向的还是window，所以，没法把数据拷贝给carlist数组，返回为undefined，也渲染不到页面上