Vue前端开发-数据缓存

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