完成全局性的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)
})
