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()