完成全局性的axios实例对象配置后，则可以在任意一个组件中直接调用这个对象，发送异步请求，获取服务端返回的数据，同时，针对那些不经常变化的数据，可以在请求过程中，进行数据缓存，并根据设定的缓存时长，定时更新数据，接下来进行详细介绍。

一、请求数据

配置好全局性的axios实例对象后，请求数据就变得十分简单，只需在组件中，通过this这个对象，调用$http属性，就可以获取配置好的axios实例化对象，再通过这个对象发送异步请求，并在then函数中获取响应的数据，下面通过一个完整的实例来演示请求过程。

实例9-1 请求数据

1. 功能描述

在首页中，当点击左侧菜单的“数据请求”链接时，则在页面右侧进入路径为“/d-1”对应的组件，在组件中当点击“发送请求”按钮时，调用全局的axios实例对象，根据指定的请求地址，发送异步请求，并将返回的数据显示在元素中。

2. 实现代码

在项目的components 文件夹中，添加一个名为“BaseRequest”的.vue文件，该文件的保存路径是“components/ch9/”，在文件中加入如清单9-1所示代码。

代码清单9-1 BaseRequest.vue代码

<template><div class="iframe"><div class="i-left"><span>返回值：</span><span>{{ data }}</span></div></div><div class="iframe"><div class="i-left"><button @click="onSendRequest">发送请求</button></div></div>
</template>
<script>
export default {data() {return {data: ""}},methods: {onSendRequest() {this.data = "loading...";this.$http.get('/?day=1-1').then(d => {this.data = d.data})}}
}
</script>
<style>
.iframe {width: 300px;display: flex;justify-content: space-between;align-items: center;padding: 16px 8px;border: solid 1px #ccc;
}.i-left {display: flex;align-items: center;
}.iframe:last-child {border-top: none;background-color: #eee;
}
</style>

为了配置全局性的axios实例化对象，先在项目的components 文件夹中，添加一个名称为“axios”的js文件，该文件的保存路径是“components/plugins/”，并在文件中加入如清单9-2所示代码。

代码清单9-2 axios.js代码

import axios from "axios";
const request = axios.create({baseURL: "http://rttop.cn/api",timeout: 2000
})
export default request;

创建并导出axios对象后，还需要将该对象挂载到新建的app应用中，因此，需要将入口文件main.js进行如代码清单9-3所示的修改。

代码清单9-3 main.js代码

import { createApp } from 'vue'
import App from './App.vue'
import Global from './components/ch6/Global'
import router from './router/index'
import request from './plugins/axios';
let app = createApp(App);
app.config.globalProperties.$http = request;
app.component("Global", Global);
app.use(router);
app.mount('#app')

为了实现点击“数据请求”链接后路由跳转的功能，需要向配置的路由对象中添加新的路径与组件对应关系，在目录“components/router/”下，打开index.js文件，新添加如代码清单9-4所示的加粗部分内容。

代码清单9-4 index.js代码

import { createRouter, createWebHistory } from 'vue-router';
// 配置组件对应路径
const routes = [{path: '/d-1',name: 'd-1',component: () => 
import('../components/ch9/BaseRequest.vue')}// 省略部分其他代码
]
const router = createRouter({history: createWebHistory(process.env.BASE_URL),routes
})
export default router

最后，在默认入口组件App.vue中，添加链接和router-view元素，当点击左侧“数据请求”链接后，在右侧的router-view元素中，加载路径对应的组件，该文件的完整代码如下列代码清单9-5所示。

代码清单9-5 App.vue代码

<template><div class="frame"><div class="f-left"><router-link to="/d-1">数据请求</router-link></div><div class="f-right"><router-view></router-view></div></div>
</template>
<script>
export default {name: "App",data() {return {}}
};
</script>
<style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;color: #2c3e50;
}nav {color: #666;margin: 5px 0;font-size: 13px;
}
a{text-decoration: none;
}
.frame{display: flex;
}
.frame .f-left{width: 120px;padding: 10px;
}
</style>

3. 页面效果

保存代码后，页面在Chrome浏览器下执行的页面效果如图9-6所示。

4. 源码分析

在数据请求组件BaseRequest.vue中，当用户点击“数据请求”按钮后，触发按钮的单击事件，并执行单击事件函数，在函数中，首先修改data状态变量值，由于在发送异步请求时，无法立即响应，因此，在请求过程中，通常使用一个状态变量，告知用户请求的状态。

然后，再通过this访全局性的axios对象，并调用该对象的别名get，以GET方式，根据指定的URL地址，发送异步的请求，最后，当请求成功时，触发then方法中的第一个回调函数，并在回调函数中获取到服务端返回的数据d，并更新到状态变量data中。

需要说明的是：then方法中有两个回调函数，第一个是请求成功时被执行，第二个是请求失败时执行，因此，考虑到请求失败的可能性，then方法中的代码应修改成如下代码所示：

this.$http.get('/?day=1-1').then(d => {
this.data = d.data
}, err => {console.log(err.message)
})