10.网络请求：axios

场景：前端向后端请求数据时，后端数据还未准备好，所以需要在前端模拟网络请求。

步骤一：输入npm install axios --save

步骤二：main.js

import axios from "axios";
Vue.prototype.$axios = axios;

步骤三：新建json文件。路径：static/mockdata/ballStyle.json（static与src同级）

//1.assets文件夹和static文件夹在vue-cli生成的项目中，都是用来存放静态资源的。
//2.assets目录中的文件会被webpack处理解析为模块依赖，只支持相对路径形式。build时由webpack解析为模块依赖。
//3.static目录下的文件不会被webpack处理，它们会直接被复制到最终的打包目录下（默认dist/static）。
//4.json文件格式
{
    "ballStyle":[
        {
            "size":"5.2",
            "bottom":"4.6"
        },
        {
            "size":"6.8",
            "bottom":"9.3"
        }
    ]
}

步骤四：组件使用

<script>
    export default{
        mounted(){
            this.fetchData()
        },
        methods:{
            fetchData(){
                this.$axios.get('static/mockdata/ballStyle.json').then((res)=>{
                    this.ball=res.data.ballStyle
                })
            }
        }
    }
</script>