持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第18天，点击查看活动详情
上一篇文章中我们二次封装了axios并且使用了fastmock来模拟我们需要使用到的数据，接下来哦我们将使用axios以及模拟数据来发送请求渲染数据到我们的main页面上去。
- 首先我们需要在api文件下创建一个api.js文件，里面配置我们需要发送请求的接口路径，我们需要首页的count数据，所以先import引入一下request，然后定义getCountData方法通过get方式来发送请求，具体的代码如下图所示：
- 配置完成之后我们就需要在页面里面定义获取数据的方法，在src目录下创建Home文件夹并且在里面创建home.js文件，然后在setup语法糖下面创建一个getCountData方法，并且通过async以及await来发送异步请求，这里我们需要引入getCurrentInstance，并且从这里面获取到proxy对象，之后再在main.js中创建一个全局变量$api，在main.js中的改变的代码如下所示：
app.config.globalProperties.$api=api
- 然后就可以发送请求获取数据了，在home.vue中创建一个获取数量数据的方法，代码如下所示：
const getCountData = async () => {
let res = await proxy.$api.getCountData();
topData.value = res.data.data;
};
在获取到数据之前我们可以通过console.log来打印res来看看是否请求到了数据，打印的结果如下图所示：
然后我们就可以通过v-for来循环渲染数据到我们的页面上了。
