面试题：Vue组件网络请求封装中如何优雅处理缓存

实现缓存机制的思路

判断缓存是否有效：
- 时间维度：可以在缓存数据时记录时间戳，每次使用缓存数据前，计算当前时间与缓存时间戳的差值，若差值在设定的有效期内，则认为缓存有效。例如，设定有效期为1小时（3600秒），若缓存时间戳距离当前时间小于3600秒，缓存有效。
- 版本维度：对于一些数据可以设置版本号，服务器数据更新时，同时更新版本号。客户端缓存数据时，保存版本号，每次请求前对比本地缓存版本号与服务器版本号，若相同则认为缓存有效。
如何更新缓存：
- 手动更新：当明确知道数据发生变化时，例如用户手动刷新数据或者执行了特定操作（如保存数据成功后），手动调用更新缓存的方法，重新发起网络请求获取最新数据并更新缓存。
- 自动更新：在网络请求成功时，判断返回的数据与缓存数据是否不同，若不同则更新缓存。还可以结合上述的时间维度和版本维度的判断，在缓存失效时自动更新缓存。

使用Vuex和localStorage实现简单缓存功能示例

安装Vuex：确保项目安装了Vuex，若未安装可使用npm install vuex --save安装。
创建Vuex store：

// store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    cachedData: null,
    cacheTimestamp: null
  },
  mutations: {
    SET_CACHED_DATA(state, { data, timestamp }) {
      state.cachedData = data;
      state.cacheTimestamp = timestamp;
      localStorage.setItem('cachedData', JSON.stringify(data));
      localStorage.setItem('cacheTimestamp', timestamp);
    },
    CLEAR_CACHED_DATA(state) {
      state.cachedData = null;
      state.cacheTimestamp = null;
      localStorage.removeItem('cachedData');
      localStorage.removeItem('cacheTimestamp');
    }
  },
  actions: {
    async fetchData({ state, commit }) {
      const cacheDuration = 3600; // 缓存有效期3600秒
      const currentTime = new Date().getTime();
      const cachedData = localStorage.getItem('cachedData');
      const cacheTimestamp = localStorage.getItem('cacheTimestamp');

      if (cachedData && cacheTimestamp && (currentTime - parseInt(cacheTimestamp)) < cacheDuration) {
        commit('SET_CACHED_DATA', { data: JSON.parse(cachedData), timestamp: parseInt(cacheTimestamp) });
        return JSON.parse(cachedData);
      } else {
        try {
          // 这里模拟网络请求，实际中替换为真实的请求逻辑
          const response = await new Promise(resolve => setTimeout(() => resolve({ message: 'Mock Data' }), 1000));
          const newTimestamp = new Date().getTime();
          commit('SET_CACHED_DATA', { data: response, timestamp: newTimestamp });
          return response;
        } catch (error) {
          console.error('Error fetching data:', error);
          return null;
        }
      }
    }
  }
});

export default store;

在Vue组件中使用：

<template>
  <div>
    <button @click="fetchData">获取数据</button>
    <div v-if="data">
      <pre>{{ data }}</pre>
    </div>
  </div>
</template>

<script>
import { mapActions } from 'vuex';

export default {
  data() {
    return {
      data: null
    };
  },
  methods: {
   ...mapActions(['fetchData']),
    async getData() {
      const result = await this.fetchData();
      this.data = result;
    }
  },
  created() {
    this.getData();
  }
};
</script>

在上述示例中，fetchData 方法首先检查本地缓存是否有效，若有效则直接返回缓存数据，否则发起网络请求获取最新数据，并更新缓存。SET_CACHED_DATA 突变用于更新Vuex状态和本地存储，CLEAR_CACHED_DATA 突变用于清除缓存。在Vue组件中，通过 mapActions 映射 fetchData 方法并在组件创建时调用以获取数据。

星途面试题库

面试题：Vue组件网络请求封装中如何优雅处理缓存

知识考点

面试题答案

实现缓存机制的思路

使用Vuex和localStorage实现简单缓存功能示例