feat: 缓存修改

4 years ago · 63e1f0d81f
11 changed files with 102 additions and 48 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -1,4 +1,4 @@
-# 0.1.0 (2021-08-16)
+# 0.1.0 (2021-08-17)

 ### 🌟 新功能
 范围|描述|commitId
@ -55,6 +55,7 @@
 范围|描述|commitId
 --|--|--
 - | calendar注释 | a2ec112
+ - | indexedDB.js格式整理 | b0d3a36
 - | 代码审查 | d75134c
 - | 代码格式细节调整 | cb2532b
 - | 任务快捷方式图标增加 | 4aba872
--- a/src/apis/tall.js
+++ b/src/apis/tall.js
@ -1,5 +1,5 @@
 const apiUrl = process.env.VUE_APP_API_URL;
-const tall = `${apiUrl}/tall3/v3.0`;
+export const tall = `${apiUrl}/tall3/v3.0`;

 const install = (Vue, vm) => {
  vm.$u.api = { ...vm.$u.api } || {};
--- a/src/main.js
+++ b/src/main.js
@ -12,8 +12,8 @@ import AlloyFinger from 'alloyfinger';
 import AlloyFingerPlugin from 'alloyfinger/vue/alloy_finger_vue';
 Vue.use(AlloyFingerPlugin, { AlloyFinger });
 // indexedDB
-import indexedDB from '@/utils/indexedDB';
-Vue.use(indexedDB);
+// import indexedDB from '@/utils/indexedDB';
+// Vue.use(indexedDB);
 //#endif

 Vue.config.productionTip = false;
--- a/src/pages/index/index.vue
+++ b/src/pages/index/index.vue
@ -52,13 +52,15 @@ export default {
    ...mapMutations('project', ['setProjects', 'setDotList']),

    // 获取项目列表
-    async getProjects(start = this.$moment().startOf('day').valueOf(), end = this.$moment().endOf('day').valueOf()) {
-      try {
-        const data = await this.$u.api.getProjects(start, end);
-        this.setProjects(data);
-      } catch (error) {
-        console.error('error: ', error);
-      }
+    getProjects(start = this.$moment().startOf('day').valueOf(), end = this.$moment().endOf('day').valueOf()) {
+      // const data = await this.$u.api.getProjects(start, end);
+      this.$t.$q.getProjects(start, end, (err, data) => {
+        if (err) {
+          console.error('error: ', error);
+        } else {
+          this.setProjects(data);
+        }
+      });
    },

    /**
--- a/src/pages/test/test.vue
+++ b/src/pages/test/test.vue
@ -12,15 +12,16 @@
 <script>
 export default {
  created() {
-    // this.getProjects(this.$moment().startOf('day').valueOf(), this.$moment().endOf('day').valueOf());
+    // this.$t.$q.getProjects(this.$moment().startOf('day').valueOf(), this.$moment().endOf('day').valueOf(), (err, data) => {
+    //   if (err) {
+    //     console.error(err);
+    //   } else {
+    //     console.log('data: ' + data);
+    //   }
+    // });
  },

  methods: {
-    async getProjects(startTime, endTime) {
-      const data = await this.$t.$q.getProjects(startTime, endTime);
-      console.log('data: ', data);
-    },
-
    add() {
      this.$db.create('projects', { id: '124', sex: ' man' });
    },
--- a/src/utils/cache.js
+++ b/src/utils/cache.js
@ -1,8 +1,9 @@
 export const filter = {
  /**
-   * 过滤获取到的数据
-   * @param {number} start
-   * @param {number} end
+   * 过滤获取到的数据 根据开始截止时间
+   * @param {object} data 缓存拿到的数据
+   * @param {number} start ms
+   * @param {number} end ms
   * @returns
   */
  projects(data, start, end) {
@ -13,20 +14,50 @@ export const filter = {

 export default {
  /**
-   * 获取项目列表
+   * 项目列表某天的 获取
   * @param {number} startTime
   * @param {number} endTime
   * @returns
   */
-  async getProjects(startTime, endTime) {
+  async getProjectsByDay(startTime, endTime) {
    try {
-      let data = null;
-      // #ifdef H5
-      data = await window.vm.$db.find('projects');
-      // #endif
-      return filter.projects(data, startTime, endTime);
+      const data = await uni.$t.storage.getStorage('projects');
+      return filter.projects(JSON.parse(data), startTime, endTime);
    } catch (error) {
-      throw new Error(error);
+      console.log('error: ', error);
+      return [];
+    }
+  },
+
+  /**
+   * 项目列表 存
+   * @param {array} data
+   */
+  putProjects(data) {
+    try {
+      if (!data || !data.length) return; // 服务端没数据不做操作
+
+      let locals = JSON.parse(uni.$t.storage.getStorageSync('projects')) || [];
+      if (!locals || !locals.length) {
+        // 本地没数据
+        locals = data || [];
+      } else {
+        // 本地有数据
+        data.forEach(item => {
+          let localData = locals.find(local => item.id === local.id);
+          if (localData) {
+            // 有相同数据  就用新的data里的数据
+            localData = item;
+          } else {
+            // 没有就直接存本地
+            locals.push(item);
+          }
+        });
+      }
+      uni.$t.storage.setStorage('projects', locals);
+    } catch (error) {
+      console.error('error: ', error);
+      uni.$t.storage.setStorage('projects', []);
    }
  },
 };
--- a/src/utils/cacheAndRequest.js
+++ b/src/utils/cacheAndRequest.js
@ -1,28 +1,46 @@
+/**
+ * 等待token执行api
+ * 没有token 就延时执行自己 直到有了token在请求
+ * @param {function} requestFn 执行请求的函数
+ */
+export const waitTokenRequest = requestFn => {
+  if (!requestFn || typeof requestFn !== 'function') throw new Error(`requestFn must be a function`);
+  if (uni.$t.storage.getStorageSync(uni.$t.app.tokenKey)) {
+    requestFn();
+  } else {
+    setTimeout(() => waitTokenRequest(requestFn), 10);
+  }
+};
+
 export default {
  /**
   * 获取项目列表
   * @param {number} startTime 起始时间
   * @param {number} endTime 截止时间
   */
-  getProjects(startTime, endTime) {
-    return new Promise((resolve, reject) => {
-      let remote = false;
-      // 有缓存 且 服务端数据未返回 就先返回缓存
-      uni.$t.cache
-        .getProjects(startTime, endTime)
-        .then(data => {
-          !remote && resolve(data);
-        })
-        .catch(err => !remote && reject(err));
+  getProjects(startTime, endTime, fn) {
+    let remote = false;
+    // 有缓存 且 服务端数据未返回 就先返回缓存
+    uni.$t.cache
+      .getProjectsByDay(startTime, endTime)
+      .then(data => {
+        // console.log('cache data: ', data);
+        !remote && fn(null, data);
+      })
+      .catch(err => !remote && fn(err));

+    waitTokenRequest(() => {
      // 拿到api数据后 再用api的数据
      uni.$u.api
        .getProjects(startTime, endTime)
        .then(data => {
+          // console.log('api data: ', data);
          remote = true;
-          resolve(data);
+          fn(null, data);
+          // 存api到cache里
+          uni.$t.cache.putProjects(data);
        })
-        .catch(err => reject(err));
+        .catch(err => fn(err));
    });
  },
 };
--- a/src/utils/indexedDB.js
+++ b/src/utils/indexedDB.js
@ -137,7 +137,7 @@ export const curriedUpdate = curry(update);
 export const curriedIndex = curry(createIndexAndFind);

 const install = Vue => {
-  Vue.prototype.$db = {};
+  uni.$db = Vue.prototype.$db = {};
  Vue.prototype.$db.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
  const request = Vue.prototype.$db.indexedDB.open(name, Date.now()); //  IDBRequest 对象
  request.onerror = error => console.error('打开数据库失败', error);
--- a/src/utils/request.js
+++ b/src/utils/request.js
@ -11,8 +11,9 @@ const install = (Vue, vm) => {

  // 请求拦截部分，如配置，每次请求前都会执行
  Vue.prototype.$u.http.interceptor.request = config => {
-    if (vm.$store.state.user.token) {
-      config.header.Authorization = `Bearer ${vm.$store.state.user.token}`;
+    const token = vm.$store.state.user.token || uni.$t.storage.getStorageSync(uni.$t.app.tokenKey);
+    if (token) {
+      config.header.Authorization = `Bearer ${token}`;
    }

    return config;
--- a/src/utils/storage.js
+++ b/src/utils/storage.js
@ -67,7 +67,7 @@ export default {
          resolve(res.data);
        },
        fail(error) {
-          reject(`数据${key}获取失败, error: ${error}`);
+          reject(`数据${key}获取失败, error: ${error.errMsg}`);
        },
      });
    });
--- a/src/utils/tall.js
+++ b/src/utils/tall.js
@ -6,8 +6,8 @@ import storage from '@/utils/storage.js';
 import time from '@/utils/time.js';
 import ui from '@/utils/ui.js';
 import upload from '@/utils/upload.js';
-// import cacheAndRequest from '@/utils/cacheAndRequest.js';
-// import cache from '@/utils/cache.js';
+import cacheAndRequest from '@/utils/cacheAndRequest.js';
+import cache from '@/utils/cache.js';

 const gateway = process.env.VUE_APP_API_URL;

@ -21,8 +21,8 @@ const $t = {
  ui, // ui界面提示相关
  chooseAndUpload: upload.chooseAndUpload, // 选择并上传单个文件相关的封装
  domain: `${gateway}/defaultwbs`,
-  // cache, // 本地存储相关
-  // $q: cacheAndRequest,
+  cache, // 本地存储相关
+  $q: cacheAndRequest,
 };

 uni.$t = $t;